Question

我用可滚动的表体构造了一个表。现在，我在调整表格数据单元格的宽度时遇到了一些困难。更改td的宽度值不会影响大小。请参见下面的代码。

此代码段包含HTML和CSS：

#d2 {
  border: solid black;
  width: 20%;
  height: 28%;
  display: inline-block;
  overflow-x: auto;
}

#d1 {
  border: solid black;
  display: inline-block;
  width: 8%;
  height: 28%;
}

tr {
  width: 100vw;
}

td {
  border: solid black;
  width: 100px;
  /* changing the value of the width here have no effect*/
  height: 7vh;
}

#tro1,
#tro2,
#tro3 {
  display: block;
  border: solid black;
  height: 7.4vh;
  width: 7vw;
}

<div id='d1'>
  <table>
    <tr id='tro1'>
      <th> Centro</th>
    </tr>
    <tr id='tro2'>
      <th>Date</th>
    </tr>
    <tr id='tro3'>
      <th>Date</th>
    </tr>
  </table>


</div>

<div id='d2'>
  <table>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
      <td>Mexico</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
      <td>Mexico</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
      <td>Mexico</td>
      <td>Mexico</td>
    </tr>
  </table>
</div>

Answer 1

如果只想更改td的宽度，那么还可以使用CSS的min-width属性。

HTML和CSS：

#d2 {
  border: solid black;
  width: 20%;
  height: 28%;
  display: inline-block;
  overflow-x: auto;
}

#d1 {
  border: solid black;
  display: inline-block;
  width: 8%;
  height: 28%;
}

tr {
  width: 100vw;
}

td {
  border: solid black;
  width: 100px;
  /* changing the value of the width here have no effect*/
  height: 7vh;
  min-width: 200px;
  /* changing the value of the width will work with min width bro*/
}

#tro1,
#tro2,
#tro3 {
  display: block;
  border: solid black;
  height: 7.4vh;
  width: 7vw;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="td.css">
  <title>Document</title>
</head>

<body>
  <div id='d1'>
    <table>
      <tr id='tro1'>
        <th> Centro</th>
      </tr>
      <tr id='tro2'>
        <th>Date</th>
      </tr>
      <tr id='tro3'>
        <th>Date</th>
      </tr>
    </table>


  </div>

  <div id='d2'>
    <table>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Mexico</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Mexico</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Mexico</td>
        <td>Mexico</td>
      </tr>
    </table>
  </div>
</body>

</html>

jsfiddle输出： https://jsfiddle.net/defenderkhan/54ufsy1m/2/

您还可以使用Bootstrap 4 classes轻松完成此操作。

Answer 2

宽度没有改变，因为您已将父div的宽度设置为固定

width: 20%;
height: 28%;

尝试更改这些值，然后设置所需的宽度。

更改td的宽度

2 个答案: