I have a <table> that I would like to have a width that contains its children <td>.
Unfortunately, I can only assign classes to the <td> columns, and not the <th> columns - so I can't use table-layout: fixed as I usually would. w3 spec on table-layout: http://www.w3.org/TR/CSS2/tables.html#width-layout
Do you know how to make a <table> width equal to its children <td>?
HTML
<table>
<thead>
<tr>
<th>
First
</th>
<th>
Last
</th>
<th>
Info
</th>
<th>
Join Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">
Don
</td>
<td class="last">
P
</td>
<td class="info">
Here is some rando info that can vary in length. I talk a lot.
</td>
<td class="join-date">
2013-03-01
</td>
</tr>
<tr>
<td class="first">
Tom
</td>
<td class="last">
Smith
</td>
<td class="info">
I'm a quiet person.
</td>
<td class="join-date">
2013-04-22
</td>
</tr>
</tbody>
</table>
CSS
table {
table-layout: fixed;
}
.first, .last, .join-date {
width: 250px;
}
.info {
min-width: 400px;
width: 200%; /* so this column will expand */
}
If the content is fixed, assign manual width to the of just the 1st .
The table will then adjust according to the width that you specify.
Eg :
<table>
<tr>
<td style="width:100px"></td>
</tr>
</table>
Related
I have 2 HTML tables with exactly the same code in both cases. I have used "colspan" there to differentiate 2 columns on the table. The main table width is colspan 65, and the columns are colspan 5 and 60 respectively. But in the 2 tables, the width of the columns are showing different.
I have tested all the codes. Both table have same code, I have used table-cell property but it is still not working. There was no specified width to any columns either.
Here is the syntax of both of my tables:
<table class="agenda-table" style="width: 100%;">
<tbody>
<tr class="agheader">
<th colspan="65">Title</th>
</tr>
<tr>
<td colspan="5">xxx</td>
<td colspan="60">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td colspan="5">aaa</td>
<td colspan="60">
<h4>bbb</h4>
</td>
</tr>
....
</tbody>
</table>
You can check the live page here.
You can see 2 tables are there. 1st column of both tables are of different width irrespective of same code.
Thank you for checking.
Your page suffers many errors as you can see on this unicorn test result:
https://validator.w3.org/unicorn/check?ucn_task=conformance&ucn_uri=https%3A%2F%2Fwww.learnx.net%2Flearnx-agenda%2F&ucn_lang=en
There are many parse errors, unclosed tags which could lead to errors
like this.
Why are you using inline code if you´re using css classes to style the table?
In your pages css i´ve found this definition:
.agenda-table {
max-width: 96%;
margin: 100px auto 0;
}
so why are defining the witdh with inline code again?
style="width: 100%;"
I´ve taken your the code from your question and replaced
the inline code with classes and added some css.
css example:
* {
margin :0;
padding :0;
}
.agenda-table {
margin : 0 auto;
width : 100%
}
.agheader {
float : left;
width : 65%;
background : #f442bc;
}
th, tr {
float : left;
width : 100%;
text-align : left;
}
.left {
float : left;
width : 5%;
border-right : 1px solid #f442bc;
}
.right {
float : left;
width : 60%;
}
example html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<table class="agenda-table">
<tbody>
<tr class="agheader">
<th>Title</th>
</tr>
<tr>
<td class="left">xxx</td>
<td class="right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
<table class="agenda-table">
<tbody>
<tr class="agheader">
<th>Title</th>
</tr>
<tr>
<td class="left">xxx</td>
<td class="right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is a fiddle that shows that this example works: https://jsfiddle.net/Thorske/bL5ktrga/11/
The float definition may not be necessary since it´s a table but
this would allow to easliy switch from tables to lists.
Use an equal percentage width in the first row of each table.
<table class="agenda-table" style="width: 100%;">
<tbody>
<tr class="agheader">
<th style="width: 35%">xxx</th>
<th>Title 1</th>
</tr>
<tr>
<td>xxx</td>
<td>
<h4>yyy</h4>
</td>
</tr>
<tr>
<td>aaa</td>
<td>
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
<table class="agenda-table" style="width: 100%;">
<tbody>
<tr class="agheader">
<th style="width: 35%">xxx</th>
<th>Title 2</th>
</tr>
<tr>
<td>xxx</td>
<td>
<h4>yyy</h4>
</td>
</tr>
<tr>
<td>aaa</td>
<td>
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
I have a table structure like this
And the html structure is this
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div><!-- Tree structure is loaded here dynamically --></div>
</td>
</tr>
<tr>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
If you see the image, the Operations columns height is adjusting itself based on the Hierarchy columns height, I am looking for some way if possible to have the heights of operation column fixed say 10px and whatever space is left the last row's operation column should consume it.
So the operations column will not looke weird having so much height.
Is it possible?
the approach you are using is correct, you can use rowspan="2" on the last row as shown in my snippet.
table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div>Tree structure is loaded here dynamically</div>
</td>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text" rowspan="2">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
I am trying to get a button that I put in a table <th> to expand the full width and height of the header column, even when a table cell in the same column is larger than the text. If I do, width 100% in css, then the button will just match the cell size, and then the title will extend beyond the button and header.
I am using the button so when the user click on it the column will sort.
This is my code just trying to do with width:
<th><button onclick="tableColumnSort(this)" style="width:100%">#descriptor.Name</button></th>
And this is how it looks without using width:
<th><button onclick="tableColumnSort(this)">#descriptor.Name</button></th>
If you set an element to width: 100% or height: 100%, it's relative to its parent element. So, if you're setting your button width: 100%, and you want it to be 100% of your header width, set a width (that's not in percentage) on the header and it'll respect it. Like this:
HTML:
<table>
<thead>
<tr>
<th>
<button>shortHeader</button>
</th>
<th>
<button>veryLongLongHeader</button>
</th>
<th>
<button>header</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th>
<button>shortHeader</button>
</th>
<th>
<button>veryLongLongHeader</button>
</th>
<th>
<button>header</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
button {
width: 100%;
}
th {
width: 100px;
}
table, th, td {
border: 1px solid #000;
}
Check out this fiddle.
Change css of the clicked th with your js, with a low gray background (#ccc it's good) and change font-size a bit, 1 or 2px. TL;DR Change the frontend to show a more elegant th with the users interactions
<table>
<thead>
<tr>
<th onclick="tableColumnSort(this); changeTH(this);">
shortHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
veryLongLongHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th onclick="tableColumnSort(this); changeTH(this);">
shortHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
veryLongLongHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
On JS:
function changeTH(container){
var ths = document.getElementsByTagName('th');
var totalThs = ths.length;
//reset all ths before set your new th style
for (i = 0; i < totalThs; i++){
ths[i].style.background = '#fff';
ths[i].style.fontSize = 'inherit';
}
container.style.background = '#ccc';
container.style.fontSize = '12px'; //or other size you prefer
}
The better way to do this is add all listeners inside a js file, it's more elegant, but my example works fine.
Make your buttons display: block.
table, th, td { border-collapse: collapse; border: 1px solid #333; }
th button { display: block; width: 100%; }
<table>
<thead>
<tr>
<th><button>DELETE</button></th>
<th><button>PARTNO</button></th>
<th><button>DLT</button></th>
<th><button>TCOUNT</button></th>
<th><button>TRANS</button></th>
</tr>
</thead>
<tbody>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
</tbody>
</table>
I have a Chrome table problem as I try make fluid height all rows equals height in standard height table, Firefox is working fine!
https://jsfiddle.net/vdt745er/
table {
height:300px;
border:1px solid #000;
line-height:1;
border-collapse: collapse;
border-spacing: 0;
}
table td, table th{
border:1px solid #000;
padding: 0;
}
<table width="100%" cellpadding="0">
<thead>
<tr>
<td colspan="3" scope="col"> </td>
</tr>
</thead>
<thead>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Any help appreciated
You've hit a bug in chrome. To work around it, remove the thead and tbody tags.
Edit: chrome bug is https://crbug.com/708345 (cells in thead/tfoot don't receive extra height distribution)
I'm hoping there is a way to shrink the height of a td so that the height is exactly what I want, example 6px when it is holding 11px text. I'm envisioning being able to see the top half of the cell content.
The reason I don't want to just set the div height is I want each row to be the same height, and there are cells spanning rows so the div would be cutting off content to one cell when it should be able to expand to the two cells. I hope that makes some sense...
<table>
<thead>
<tr>
<th style="height: 0px; width: 0px;">
</th>
<th style="width: 25px;">
</th>
<th style="width: 25px;">
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="height: 6px;">
</td>
<td>
<div>
Some table data</div>
</td>
<td rowspan="2">
<div>
Some data that is two rows high</div>
</td>
</tr>
<tr>
<td style="height: 6px;">
</td>
<td>
<div>
Some more data</div>
</td>
</tr>
</tbody>
</table>
You can't restrict the table cells' height but you can enforce height on the immediate <div>s:
td > div {
overflow: hidden;
height: 6px;
}