Это моя текущая таблица
введите описание изображения здесь
Я хочу, чтобы моя таблица стала такой введите описание изображения здесь
Это мой код таблицы
<table>
<thead>
<td><input type="text" name="treat1" style="width: 80px"></td>
<td><input type="text" name="treat2"style="width: 80px"></td>
<td><input type="text" name="treat3"style="width: 80px"></td>
<td><input type="text" name="treat4"style="width: 80px"></td>
<td><input type="text" name="treat5"style="width: 80px"></td>
<td><input type="text" name="treat6"style="width: 80px"></td>
</thead>
<tbody>
<td style="width: 5%;" ><svg class="teeth" id="svg"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg2"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg3"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg4"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg5"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg6"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="incisor-group">
<rect x="75" y="75" stroke="black" id="incisal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 112.5 75 112.5" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 187.5 226 112.5" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 187.5 225 187.5" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 112.5 75 187.5" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
</tbody>
<br>
<thead>
<td><input type="text" name="treat7" style="width: 80px"></td>
<td><input type="text" name="treat8"style="width: 80px"></td>
<td><input type="text" name="treat9"style="width: 80px"></td>
<td><input type="text" name="treat10"style="width: 80px"></td>
<td><input type="text" name="treat11"style="width: 80px"></td>
<td><input type="text" name="treat12"style="width: 80px"></td>
</thead>
<tbody>
<td style="width: 5%;" ><svg class="teeth" id="svg7"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg8"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg9"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg10"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg11"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="premolar-group">
<rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
<td style="width: 5%;"><svg class="teeth" id="svg12"
width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!-- upper right 8 -->
<g id="incisor-group">
<rect x="75" y="75" stroke="black" id="incisal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
<polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 112.5 75 112.5" fill="white" />
<polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 187.5 226 112.5" fill="white" />
<polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 187.5 225 187.5" fill="white" />
<polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 112.5 75 187.5" fill="white" />
<polygon stroke="black" class="distal cross1" style="stroke-width: 5px;" fill="white" />
<polygon stroke="black" class="distal cross2" style="stroke-width: 5px;" fill="white" />
</g>
</svg></td>
</tbody>
<style type="text/css">
.teeth{
width: 75px;
height: auto;
}
</style>
</table>
Как сделать середину таблицы толстой, как на примере два выше. Может кто-нибудь помочь мне, как сделать эту часть. Мое беспокойство по поводу этой проблемы - сделать среднюю линию стола толстой. Можно ли это сделать? Извините, парень, я только начинающий.