Я хотел бы сделать таблицу HTML с «<th> расколом», как это:Как разместить столбец TH в ряде TH
Я попытался сделать таблицу HTML путем разбиения метки <th> с использованием rowspan и colspan, но мне это нужно точно так же, как на изображении.
Нет необходимости rowspan, как вы будете использовать внутреннюю таблицу, чтобы составить 4 строки JS Fiddle
table {
width: 98%;
height: 160px;
margin: 0 auto;
text-align: center;
border-collapse: collapse;
}
td {
border: 2px solid black;
}
#t1 table {
width: 100%;
}<table id="t1">
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>
<table>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td colspan="2">TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
</table>
</td>
<td>TD</td>
<td>TD</td>
</tr>
</table>Нет необходимости в CSS https://jsfiddle.net/parthmy007/s7v70dk7/
<table border="1">
<thead>
<tr>
<th rowspan="4">Items</th>
<th rowspan="4">Type</th>
<th rowspan="4">Type</th>
<th colspan="4">Values</th>
<th>Values</th>
<th rowspan="4">Date</th>
<th rowspan="4">Date</th>
</tr>
<tr>
<th colspan="4">Before</th>
<th >Before</th>
</tr>
<tr>
<th colspan="5">Before</th>
</tr>
<tr>
<th colspan="4">Before</th>
<th >Before</th>
</tr>
</thead>
<tbody></tbody>
</table>
Вот что я мог придумать: https://jsfiddle.net/ryrL79pr/
<html>
<body>
<table>
<tr>
<th rowspan="4">A</th>
<th rowspan="4">B</th>
<th rowspan="4">C</th>
<th>
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>
</th>
<th rowspan="4">D</th>
<th rowspan="4">E</th>
<th rowspan="4">F</th>
</tr>
<tr>
<th>
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>
</th>
</tr>
<tr>
<th>3</th>
</tr>
<tr>
<th>
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>
</th>
</tr>
</table>
Надежда, что помогает!
<tr>
<th rowspan="3">Client</th>
<th rowspan="3">Apt No</th>
<th rowspan="3">Sq.ft Area</th>
<th rowspan="3">Listed Price</th>
<th>Date 28-FEB-2015</th>
<th>Date 28-FEB-2015</th>
<th>Date 28-FEB-2015</th>
</tr>
<tr>
<th>1st Instalment</th>
<th>2nd Instalment</th>
<th>3rd Instalment</th>
</tr>
<tr>
<th>10% status</th>
<th>10% status</th>
<th>10% status</th>
</tr>
</table>
Так как же ваша попытка выглядеть и где и как именно у него есть недостатки? – planetmaker