I have a simple HTML table as below.
This is a responsive table and shrinks down when the browser is shrunk.
I want to set the minimum width of the column to be as wide as the header text.
What is the best way to do this in CSS?
<table>
<thead class="ui-datatable-thead">
<tr class="ui-state-default">
<th class="ui-state-default">COL HEADER</th>
</tr>
</thead>
<tbody class="ui-datatable-data ui-widget-content">
<tr class="ui-widget-content ui-datatable-odd">
<td>DATA</td>
</tr>
</tbody>
</table>
I have looked at some other answers but haven't found a solution yet.
table {
display: table;
width: 100%;
table-layout: fixed;
margin-bottom: 20px;
}
th,td {
display: table-cell;
border: 1px dotted red;
padding: 4px 6px;
width: 2%;
margin-bottom: 0;
}
<table>
<thead class="ui-datatable-thead">
<tr class="ui-state-default">
<th class="ui-state-default">COL HEADER 1</th>
<th class="ui-state-default">COL HEADER 2</th>
<th class="ui-state-default">COL HEADER 3</th>
</tr>
</thead>
<tbody class="ui-datatable-data ui-widget-content">
<tr class="ui-widget-content ui-datatable-odd">
<td>DATA 1</td>
<td>DATA 2</td>
<td>DATA 3</td>
</tr>
</tbody>
</table>
All you need to set the cell width th & td table-layout to 'fixed'.Just like i mentioned in css code. If total size of table is 500px and there are 5 columns then each column will have 100px.
table{
border: 1px solid black;
table-layout: fixed;
width: 500px;
}
th, td {
border: 1px solid black;
width: 100px;
}
You need to fix the size of the heading's TD. so body's TD will automatically take width as applied in heading's TD.
Related
I have a table and whenever there are too many rows it goes off the bottom of the page and exceeds its containers height.
<body>
<div class="myContainer">
<table class="scrolldown">
<!-- Table head content -->
<thead class="test1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<!-- Table body content -->
<tbody class="test2">
<tr>
<td>Content</td>
<td>Content</td>
</tr>...
</tbody>
</table>
</div>
<body>
CSS
.myContainer {
outline-style: solid;
outline-color: #c7d2fe;
height: 100px
}
tbody td,
thead th {
width: 200px;
border-right: 2px solid black;
}
td {
text-align: center;
}
How can I make it so that the table becomes scrollable once it would extend past its containers height?
Fiddle
You can do this by adding overflow: auto; to the wrapper div .myContainer.
This will add a scrollbar to the container when the table is taller.
Fiddle
I have a table
<div class="width1200">
<table>
<th colspan="2">Title:</th>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
<th colspan="2">Title:</th>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
</table>
</div>
table {
border-collapse: collapse;
table-layout: auto;
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
width: 100%;
}
.width1200 {
width: 1200px;
padding: 10px;
}
.td100 {
width: 100px;
}
I need to make 3 things:
The width of the table
On big screens it should be 1200 px
The table should be 100% width
The table should be responsive
Width of td
Second td should always be fixed - 100px
First td shoul be 100% of the free and responsive
At the moment the table width 100% doesn't work
You're contradicting yourself. I think you mean to say that on a big screen the table should have a maximum width of 1200px. Right?
<style>
table {
border-collapse: collapse;
table-layout: auto;
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
}
.width1200 {
max-width: 1200px;
padding: 10px;
}
.td100 {
width: 100px;
}
</style>
I changed width: 1200px; to max-width: 1200px; and removed width: 100%; from the td styling. I did not change the HTML.
I think now it does what you want?
See: Example
Here is the right one:
php code refactored ( wrong markup inside table )
<div class="width1200">
<table>
<thead>
<tr>
<th>Title:</th>
<th class="td100">Price:</th>
</tr>
</thead>
<tbody>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
</tbody>
</table>
</div>
and new css code:, set width and max width to table and set only to cells with class td100 the specific with
table {
border-collapse: collapse;
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
}
.width1200 {
max-width: 1200px;
width:100%;
padding: 10px;
}
.td100 {
width: 100px;
}
table-layout: fixed allows you to set the widths of columns explicitly. The requirement is that the widths must be set on the <th> or <td> of the first <tr>. The OPs first <tr> has col="2" making it impossible to set a width for the second column. A workaround:
is to add another <tr> at the top
add 2 cells <th> and/or <td>
do not style any borders to the row
do not add any content to the new row either
add class="td100" to the 2nd cell of the new hidden row.
BTW each colspan="2" isn't in a <tr> in OP. They are added in this example.
table {
border-collapse: collapse;
table-layout: fixed;/* IMPORTANT */
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
}
.width1200 {
width: 1200px;
padding: 10px;
}
.td100 {
width: 100px;
}
<div class="width1200">
<table>
<tr><!--NEW-->
<th></th>
<th class="td100"></th><!--100px column-->
</tr><!--ROW-->
<tr>
<th colspan="2">Title:</th>
</tr>
<tr>
<td>Harry Potter</td>
<td>$10</td>
</tr>
<tr>
<th colspan="2">Title:</th>
</tr>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
</table>
</div>
Suppose I have a table with 100vh height, how to set minimum height for thead according to inside and maximum tbody?
<table style="height: 100vh;">
<thead>...</thead>
<tbody>...</tbody>
</table>
Is this what you look for?
Updated
Did a few tests and noticed giving height to the body didn't work properly cross browser, which below update does (tested on Chrome, Firefox, Edge, IE11)
html, body {
margin: 0;
}
table {
width: 100%;
height: 100vh;
}
table thead tr {
height: 80px; /* on table elements, height works kind of like min-height */
background: yellow;
}
table tbody tr {
background: lime;
}
<table>
<thead>
<tr>
<td>
HEAD<br>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
BODY
</td>
</tr>
</tbody>
</table>
you can follow the hack to achieve your goal.
Use least height for thead, but not 0.Use 0% for tbody
html,body{
margin:0;
}
table{
width:100%;
height: 100vh;
border: 1px solid black;
}
thead{
background: red;
height:1px;
}
tbody{
background: blue;
height:0%;
}
<table>
<thead>
<tr>
<td colspan="4">
<img src="http://dummyimage.com/100x100/eb00eb/fff">
</td>
</tr>
</thead>
<tbody>
<tr>
<td>BODY</td>
<td>BODY</td>
<td>BODY</td>
<td>BODY</td>
</tr>
</tbody>
</table>
I have a trouble with x-scroll table, when I try to resize window to small size. I have the same table (with same css) which doesn't contain row with images and it works great.
HTML:
<div class="price_wrapper">
<table class="price">
<thead>
<tr class="head">
<th>Название</th>
<th>Вольерная 1</th>
<th>Вольерная 2</th>
<th>Вольерная 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Схема</td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer1.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer2.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer3.jpg" alt=""></td>
</tr>
<tr>
<td>Ширина</td>
<td>90</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<td>Высота</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>Глубина</td>
<td>60</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>Лаз</td>
<td>30x35</td>
<td>39x42</td>
<td>42x53</td>
</tr>
<tr>
<td>Стоимость, руб.</td>
<td>7 000</td>
<td>9 000</td>
<td>11 000</td>
</tr>
</tbody>
</table>
</div>
CSS:
.price_wrapper {
overflow-x: scroll;
overflow-y: auto;
min-width: 400px;
width: 100%;
}
table.price {
border-collapse: collapse;
background-color: #FFF;
}
table.price th,
table.price td {
border: solid 1px #999;
padding: 5px;
}
table.price img {
max-width: 180px;
width: 100%;
height: auto;
}
JSFiddle: https://jsfiddle.net/vasromand/gue888vp/
Why is it?
You must use width for the scroll to
work.price_wrapper {
overflow-x: autol;
overflow-y: auto;
max-width: 400px;
width: 100%;
}
And dont use scroll because it will not be working in ie so instead you can use auto for it and set max-width or width to enable the auto scroll
Your content is not overflowing, you're using the width 90% of its container.. there never will be an overflow to scroll..
800px Content
table.price {
width: 800px;
margin: 10px 5%;
border-collapse: collapse;
background-color: #FFF;
}
400px container
.price_wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 400px;
}
This will force the content to be wider than the wrapper.. which has the overflow-x
Also as correctly suggested by the other answer, use overflow:auto
Here is an updated version which will FORCE overflow to show you an example..
JSFiddle
As you can see i have forced the child to be wider than its parent.. Therefore offering scroll.
This one is driving me mad, unfortunately I'm not very good in CSS yet.
How can I get a horizontally and vertically centered text-link into a table cell which is fully clickable?
I researched, tried several solutions, none of them worked. Here is my best approach so far:
HTML
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
CSS
.dataTable td a {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
display:block;
text-decoration: none;
}
.dataTable td {
display:inline-block;
}
This one gives me centered text, but the link only covers the width of the cell, not the height. If I change the css for the link to display:inline-block, then the full cell is clickable, but the text is not vertically centered anymore.
I need both. Help!
i think you should remove this :
.dataTable td {
display:inline-block;
}
see this fiddle
I think that's what you want:
.dataTable {
text-align: center;
}
.dataTable a {
display: inline-block;
width: 100%;
height: 100%;
}
/* Just for better visualization */
.dataTable td {
background: red;
}
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
If you want to increase td's height, you should do it by modifying a's height. Otherwise, the link will not occupy the whole cell's height. You can achieve that with height property or also with line-height.
.dataTable {
text-align: center;
}
.dataTable a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 5; /* To get a 5 text lines high cell */
}
.dataTable td {
/* Just for better visualization */
background: red;
}
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
Wrap your text in a
div style="padding-top:5px;".
That will center it approximately.