如何使所有列的大小都相同?
我尝试将属性更改width
为固定值或使用col-md-*
within<th>
但没有任何变化,列的大小会自动调整为内容。
我希望它是统一的,所有列都具有相同的大小,例如130px
. 如果我想查看其余内容,我会使用水平滚动。
这是我到目前为止的代码:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table users table-hover">
<thead>
<tr>
<th>I.E.</th>
<th>Topografia</th>
<th></th>
<th>Esquema Básico Arquitectonico</th>
<th></th>
<th>Anteproyecto Arquitectonico</th>
<th></th>
<th>Proyecto Arquitectonico</th>
<th></th>
<th>Estudio Geotecnico</th>
<th></th>
<th>Diseño Estructural</th>
<th></th>
<th>Diseño Hidrosanitario</th>
<th></th>
<th>Diseño Electrico</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
您可以做的是使用
table-layout: fixed
引导表中的属性。稍后,由于它的元素
Bootstrap
具有更高的特异性,我们将不得不使用具有更高特异性的选择器。在这种情况下,我为包含所有 的行分配了一个 id,th
并且我将此作为参考id
,以便能够将属性提供给th
表中的不同属性。我使用该属性
overflow: auto
,以便在需要滚动时自动显示。您也可以使用overflow-x
仅指水平滚动或overflow-y
指垂直滚动。这是您修改后的示例。我在每个列标题 (
th
) 周围放置了一个边框,因此您可以看到它们的大小都相同。我遇到过这种类型的场景,我解决它的方法是在
div
里面添加一个th
ortd
并clase
把它width
放到类中:HTML
CSS
看例子,希望能帮到你……问候:-)
解决方案是创建一个css样式,
例子:
宽度必须是百分比。