我用可滚动的表体构造了一个表。现在,我在调整表格数据单元格的宽度时遇到了一些困难。更改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>
答案 0 :(得分: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轻松完成此操作。
答案 1 :(得分:0)
宽度没有改变,因为您已将父div
的宽度设置为固定
width: 20%;
height: 28%;
尝试更改这些值,然后设置所需的宽度。