我有个小问题:
我每行有一个不同列的表，我需要第一列和第二列具有相同的宽度百分比，所以我在 td 元素中使用了 inline-block。我的问题是，当我不将文本放在 td 内时，单元格边框呈现的方式与带文本的 td 不同。
我能做什么？
我发现把: 放在里面，td 工作正常，但我不喜欢这个解决方案。
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
text-align: left;
padding: 1px;
}<div style="width:100%">
<tr>
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
</tr>
<tr>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>最佳答案
对于 css 中的 td 标签，使用 min-height 属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
min-height: 20px;
text-align: left;
padding: 1px;
}
</style>
</head>
<body>
<div style="width:100%">
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>
</body>
</html>关于HTML+CSS 表格行 inline-block border 无文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48597652/