不同行的html表单元格宽度

小编典典

不同行的html表单元格宽度

css

我有一张table

<html>
 <body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <tr>
        <td width="25%">25</td>
        <td width="50%">50</td>
        <td width="25%">25</td>
    </tr>
    <tr>
        <td width="50%">50</td>
        <td width="30%">30</td>
        <td width="20%">20</td>
    </tr>
</table>
</body>
</html>

我如何使两行具有不同的单元格宽度？

阅读 279

2020-05-16

共1个答案

小编典典

据我所知，这是不可能的，这是有道理的，因为您要尝试做的事情与表格数据表示的想法背道而驰。但是，您可以将数据放在多个表中，并删除它们之间的任何填充和边距，以至少在视觉上达到相同的结果。类似于以下内容：

<html>



<head>

  <style type="text/css">

    .mytable {

      border-collapse: collapse;

      width: 100%;

      background-color: white;

    }

    .mytable-head {

      border: 1px solid black;

      margin-bottom: 0;

      padding-bottom: 0;

    }

    .mytable-head td {

      border: 1px solid black;

    }

    .mytable-body {

      border: 1px solid black;

      border-top: 0;

      margin-top: 0;

      padding-top: 0;

      margin-bottom: 0;

      padding-bottom: 0;

    }

    .mytable-body td {

      border: 1px solid black;

      border-top: 0;

    }

    .mytable-footer {

      border: 1px solid black;

      border-top: 0;

      margin-top: 0;

      padding-top: 0;

    }

    .mytable-footer td {

      border: 1px solid black;

      border-top: 0;

    }

  </style>

</head>



<body>

  <table class="mytable mytable-head">

    <tr>

      <td width="25%">25</td>

      <td width="50%">50</td>

      <td width="25%">25</td>

    </tr>

  </table>

  <table class="mytable mytable-body">

    <tr>

      <td width="50%">50</td>

      <td width="30%">30</td>

      <td width="20%">20</td>

    </tr>

  </table>

  <table class="mytable mytable-body">

    <tr>

      <td width="16%">16</td>

      <td width="68%">68</td>

      <td width="16%">16</td>

    </tr>

  </table>

  <table class="mytable mytable-footer">

    <tr>

      <td width="20%">20</td>

      <td width="30%">30</td>

      <td width="50%">50</td>

    </tr>

  </table>

</body>



</html>

我不知道您的要求，但是我敢肯定有一个更优雅的解决方案。

2020-05-16