Question

我想知道是否有办法以我想要的方式调整表格的大小？我想要一个X列的表，其中只有一列可以具有可变大小，其他列必须适应它们的大小，同时保持最小宽度。 EX。

| Col0 | Col1 | Col 2          | Col3     | Col4              | Col5 |
| dat1 | d    | dat3dater      | datadata | datatdatadatadata |  dat |
|      | dat2 | asdasd         | datad    | datadatadatad.....|      |

在这种情况下，Col 2使用剩余空间，其他col适应其内容。

对此进行风格化的最简单方法是什么？

Answer 1

这听起来像是响应式设计。所以你可以使用框架或简单地使用我的例子并根据你的喜好扭曲它。

＆＃13;

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    border: none;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

＆＃13;

<html>
<head>
</head>
<body>

<h2>Responsive Table</h2>
<p>Sample data take from w3schools.com .</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>LONG ONE</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>This wİll be longer so you can see the difference i hope</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

＆＃13;

html表列大小

1 个答案: