Question

我有一点问题：
我每行有一个表有不同的列，我需要让第一列和第二列具有相同的宽度百分比，所以我在td元素中使用了内联块。我的问题是，当我不在td中放置文本时，单元格的边框呈现的方式与带文本的td不同。

我该怎么办？

我发现把 放进去，td工作正常，但我不喜欢这个解决方案。

＆＃13;

table {
  color: black;
  font-family: Verdana;
  background-color: yellow;
}

td {
  border: 1px solid black;
  text-align: left;
  padding: 1px;
}

＆＃13;

<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;">&nbsp;</td>
        <td style="width:40%;display:inline-block;">b3</td>
      </tr>
    </table>
  </tr>
</div>

＆＃13;

Answer 1

用于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;">&nbsp;</td>

          <td style="width:40%;display:inline-block;">b3</td>

        </tr>

      </table>

    </tr>

  </div>

</body>

</html>

HTML + CSS表行内联块边框没有文本

1 个答案: