如何使表格的中间变得像上面的示例图2一样厚

Question

这是我当前的表

在此处输入图像描述

我希望我的桌子变成这样在此处输入图像描述

这是我的表代码

<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>

如何使表格的中间变得像上面的示例图2一样厚。有人能帮我做这部分吗。我关心的这个问题使表格的中线变粗。有可能制造吗？对不起，伙计，我只是个初学者。

Answer 1

解决方案：只需将border-left:5px solid #000;添加到您想要较厚边框的td中。

注意：这是基本的html/css知识。下次请在谷歌上快速搜索。