Как сделать размер столбца одинаковым для всех?
Я попытался изменить атрибут width
на фиксированное значение или использовать col-md-*
внутри <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
имеет более высокую специфичность для своих элементов, нам придется использовать селектор с более высокой специфичностью. В этом случае я присвоил идентификатор строке, которая содержит все,th
и я взял это как ссылкуid
, чтобы иметь возможность присвоить свойства различным,th
которые находятся в таблице.Я использую свойство
overflow: auto
, чтобы, если прокрутка необходима, она появлялась автоматически. Вы также можете использоватьoverflow-x
для ссылки только на горизонтальную прокрутку илиoverflow-y
для ссылки на вертикальную прокрутку.Это ваш модифицированный пример. Я поместил рамку вокруг каждого из заголовков столбцов (
th
), чтобы вы могли видеть, что все они имеют одинаковый размер.Я столкнулся с этим типом сценария, и я решил его, добавив
div
внутриth
илиtd
с помощьюclase
и поместивwidth
в класс:HTML
CSS
Посмотрите на пример, надеюсь, я смогу вам помочь... привет :-)
Решение состоит в том, чтобы создать стиль css,
Пример:
Ширина должна быть в процентах .