html - 有双边框的表格
问题描述
我创建了这张桌子，但我无法摆脱里面的双边框。
任何建议，我怎样才能在不改变太多的情况下解决这个问题？
我搜索了其他人的问题，但它主要以添加边框折叠结束，但这无助于我，崩溃有助于边框，但它并没有完全消失
<table class="TB1">
<tr>
<th><p>AIDS/HIV</p>
<label>
<input type="radio" name="1-radio">
Yes
</label>
<label>
<input type="radio" name="1-radio">
No
</label>
</th>
<th> <th><p>Alcohol Use/Abuse</p>
<label>
<input type="radio" name="2-radio">
Yes
</label>
<label>
<input type="radio" name="2-radio">
No
</label></th>
<th> <th><p>Anemia</p>
<label>
<input type="radio" name="3-radio">
Yes
</label>
<label>
<input type="radio" name="3-radio">
No
</label></th>
</tr>
<tr>
<th><p>Angina/Chest Pain </p>
<label>
<input type="radio" name="4-radio">
Yes
</label>
<label>
<input type="radio" name="4-radio">
No
</label>
</th>
<th> <th><p>Asthma</p>
<label>
<input type="radio" name="5-radio">
Yes
</label>
<label>
<input type="radio" name="5-radio">
No
</label></th>
<th> <th><p>Blood Disease</p>
<label>
<input type="radio" name="6-radio">
Yes
</label>
<label>
<input type="radio" name="6-radio">
No
</label></th>
</tr>
<tr>
<th><p>Cancer</p>
<label>
<input type="radio" name="7-radio">
Yes
</label>
<label>
<input type="radio" name="7-radio">
No
</label>
</th>
<th> <th><p>Chemotherapy</p>
<label>
<input type="radio" name="8-radio">
Yes
</label>
<label>
<input type="radio" name="8-radio">
No
</label></th>
<th> <th><p>Any Heart Disorder </p>
<label>
<input type="radio" name="9-radio">
Yes
</label>
<label>
<input type="radio" name="9-radio">
No
</label></th>
</tr>
<tr>
<th><p>Diabetes</p>
<label>
<input type="radio" name="0-radio">
Yes
</label>
<label>
<input type="radio" name="0-radio">
No
</label>
</th>
<th> <th><p>Hepatitis B</p>
<label>
<input type="radio" name="11-radio">
Yes
</label>
<label>
<input type="radio" name="11-radio">
No
</label></th>
<th> <th><p>Hepatitis C </p>
<label>
<input type="radio" name="12-radio">
Yes
</label>
<label>
<input type="radio" name="12-radio">
No
</label></th>
</tr>
<tr>
<th><p>High Blood Pressure</p>
<label>
<input type="radio" name="13-radio">
Yes
</label>
<label>
<input type="radio" name="13-radio">
No
</label>
</th>
<th> <th><p>Low Blood Pressure</p>
<label>
<input type="radio" name="14-radio">
Yes
</label>
<label>
<input type="radio" name="14-radio">
No
</label></th>
<th> <th><p>Renal Dialysis</p>
<label>
<input type="radio" name="15-radio">
Yes
</label>
<label>
<input type="radio" name="15-radio">
No
</label></th>
</tr>
<tr>
<th><p>TB</p>
<label>
<input type="radio" name="16-radio">
Yes
</label>
<label>
<input type="radio" name="16-radio">
No
</label>
</th>
<th> <th><p>Jaundice</p>
<label>
<input type="radio" name="17-radio">
Yes
</label>
<label>
<input type="radio" name="17-radio">
No
</label></th>
<th> <th><p>Lung Disease</p>
<label>
<input type="radio" name="18-radio">
Yes
</label>
<label>
<input type="radio" name="18-radio">
No
</label></th>
</tr>
</table>
.TB1{
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
margin: 20px;
padding: 20px;
border-collapse:collapse;
}
.TB1 th{
border: 3px solid red;
}
解决方案
你的代码中有一些空的额外<th>标签，浏览器将它们呈现为一个空的小表格单元格
尝试这个：
.TB1{
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
margin: 20px;
padding: 20px;
border-collapse:collapse;
}
.TB1 th{
border: 3px solid red;
} <table class="TB1">
<tr>
<th><p>AIDS/HIV</p>
<label>
<input type="radio" name="1-radio">
Yes
</label>
<label>
<input type="radio" name="1-radio">
No
</label>
</th>
<th><p>Alcohol Use/Abuse</p>
<label>
<input type="radio" name="2-radio">
Yes
</label>
<label>
<input type="radio" name="2-radio">
No
</label></th>
<th><p>Anemia</p>
<label>
<input type="radio" name="3-radio">
Yes
</label>
<label>
<input type="radio" name="3-radio">
No
</label></th>
</tr>
<tr>
<th><p>Angina/Chest Pain </p>
<label>
<input type="radio" name="4-radio">
Yes
</label>
<label>
<input type="radio" name="4-radio">
No
</label>
</th>
<th><p>Asthma</p>
<label>
<input type="radio" name="5-radio">
Yes
</label>
<label>
<input type="radio" name="5-radio">
No
</label></th>
<th><p>Blood Disease</p>
<label>
<input type="radio" name="6-radio">
Yes
</label>
<label>
<input type="radio" name="6-radio">
No
</label></th>
</tr>
<tr>
<th><p>Cancer</p>
<label>
<input type="radio" name="7-radio">
Yes
</label>
<label>
<input type="radio" name="7-radio">
No
</label>
</th>
<th><p>Chemotherapy</p>
<label>
<input type="radio" name="8-radio">
Yes
</label>
<label>
<input type="radio" name="8-radio">
No
</label></th>
<th><p>Any Heart Disorder </p>
<label>
<input type="radio" name="9-radio">
Yes
</label>
<label>
<input type="radio" name="9-radio">
No
</label></th>
</tr>
<tr>
<th><p>Diabetes</p>
<label>
<input type="radio" name="0-radio">
Yes
</label>
<label>
<input type="radio" name="0-radio">
No
</label>
</th>
<th><p>Hepatitis B</p>
<label>
<input type="radio" name="11-radio">
Yes
</label>
<label>
<input type="radio" name="11-radio">
No
</label></th>
<th><p>Hepatitis C </p>
<label>
<input type="radio" name="12-radio">
Yes
</label>
<label>
<input type="radio" name="12-radio">
No
</label></th>
</tr>
<tr>
<th><p>High Blood Pressure</p>
<label>
<input type="radio" name="13-radio">
Yes
</label>
<label>
<input type="radio" name="13-radio">
No
</label>
</th>
<th><p>Low Blood Pressure</p>
<label>
<input type="radio" name="14-radio">
Yes
</label>
<label>
<input type="radio" name="14-radio">
No
</label></th>
<th><p>Renal Dialysis</p>
<label>
<input type="radio" name="15-radio">
Yes
</label>
<label>
<input type="radio" name="15-radio">
No
</label></th>
</tr>
<tr>
<th><p>TB</p>
<label>
<input type="radio" name="16-radio">
Yes
</label>
<label>
<input type="radio" name="16-radio">
No
</label>
</th>
<th><p>Jaundice</p>
<label>
<input type="radio" name="17-radio">
Yes
</label>
<label>
<input type="radio" name="17-radio">
No
</label></th>
<th><p>Lung Disease</p>
<label>
<input type="radio" name="18-radio">
Yes
</label>
<label>
<input type="radio" name="18-radio">
No
</label></th>
</tr>
</table>
推荐阅读
- zapier - Why doesn't my Zapier Integration Dynamic Field work?
- cucumber - Cucumber testng 与 PowerMockTestCase 模拟静态类
- powershell - Change a property of a task in task scheduler using powershell
- amazon-web-services - AWS 负载均衡器和 BlueHost
- c++ - Zero initialization of nested struct - compiler bug?
- c# - IReadOnlyList
and setter - mysql - MySQL JSON_EXTRACT 与 LIMIT 和 OFFSET
- visual-studio-code - 如何在 TM 语言中定义正则表达式变量？
- ios - 向一组 UITextField 添加新的“发送事件”时遇到问题
- delphi - 如何防止 Tflowpanel 中的闪烁？