How do I get the column size to be the same for all?
I have tried changing the attribute width
to a fixed value or using col-md-*
within <th>
but nothing changes, the size of the column is automatically adjusting to the content.
I want it to be uniform, that all the columns have the same size, for example 130px
. And that if I want to see the rest of the content I use the horizontal scroll.
This is the code I have so far:
<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>
What you can do is use the property
table-layout: fixed
in your bootstrap table.Later, and since it
Bootstrap
has a higher specificity for its elements, we will have to use a selector with a higher specificity. In this case I have assigned an id to the row that contains all theth
and I have taken this as a referenceid
to be able to give the properties to the differentth
ones found in the table.I use the property
overflow: auto
so that, if the scroll is necessary, it appears automatically. You could also useoverflow-x
to refer only to horizontal scrolling oroverflow-y
to refer to vertical scrolling.This is your modified example. I've put a border around each of the column headers (
th
) so you can see that they're all the same size.I have come across this type of scenario and the way I have solved it is by adding an
div
inside theth
ortd
with anclase
and putting thewidth
to the class:HTML
CSS
Look at the example, I hope I can help you... greetings :-)
The solution is to create a css style,
Example:
The width has to be in percentage .