Originariamente inviata da
KillerWorm
Come accennato da lucavizzi, è possibile ad esempio usare dei
div ed impaginarli in modo tabellare.
Tuttavia, se vuoi mantenere le tabelle, una soluzione potrebbe essere quella di annidarle. Nel tuo caso potresti inserire una tabella per ogni ultimo
td della tabella principale.
Ti posto un esempio pratico da cui puoi prendere spunto. E' compreso anche di bordi arrotondati come chiedevi in altri post:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
#tabella_principale{
border-spacing: 1px;
border-radius: 15px;
background: Grey;
}
#tabella_principale table{
border-spacing: 0;
}
#tabella_principale>tbody>tr:first-child>td:last-child{
border-radius: 0 13px 0 0;
}
#tabella_principale>tbody>tr:last-child>td:last-child{
border-radius: 0 0 13px 0;
}
#tabella_principale td{
padding: 0 4px;
}
#tabella_principale>tbody>tr>td:last-child{
background: White;
padding: 0 10px 0 0;
}
#tabella_principale td td:not(:last-child){
border-right: 1px solid Grey;
}
#tabella_principale th{
width: 150px;
background: Orange;
border-radius: 13px 0 0 13px;
}
#tabella_principale>tbody>tr>td:nth-of-type(1){
width: 120px;
background: Yellow;
}
#tabella_principale>tbody>tr>td:nth-of-type(2){
width: 500px;
}
#tabella_principale td>table{
width: 100%
}
#tabella_principale table td{
background: transparent;
}
</style>
</head>
<body>
<table id="tabella_principale">
<tbody>
<tr>
<th rowspan="10">TAB</th>
<td>A</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
<td>Tre</td>
<td>Quattro</td>
</tr></table>
</td>
</tr>
<tr>
<td>B</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
<td>Tre</td>
<td>Quattro</td>
</tr></table>
</td>
</tr>
<tr>
<td>C</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
</tr></table>
</td>
</tr>
<tr>
<td>D</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
</tr></table>
</td>
</tr>
<tr>
<td>E</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
<td>Tre</td>
</tr></table>
</td>
</tr>
<tr>
<td>F</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
</tr></table>
</td>
</tr>
<tr>
<td>G</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
</tr></table>
</td>
</tr>
<tr>
<td>H</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
<td>Tre</td>
</tr></table>
</td>
</tr>
<tr>
<td>I</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
<td>Tre</td>
<td>Quattro</td>
<td>Cinque</td>
<td>Sei</td>
<td>Sette</td>
</tr></table>
</td>
</tr>
<tr>
<td>L</td>
<td>
<table><tr>
<td>Uno</td>
<td>Due</td>
<td>Tre</td>
<td>Quattro</td>
<td>Cinque</td>
<td>Sei</td>
<td>Sette</td>
</tr></table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Rispondi quotando
