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)
Related
I'm trying to add vertical lines to my table that aligns with the headers and I'm using 'border-collapse: separate' as well as colspan that varies from 1 to any number. Here is an image to imagine it
Keeping in mind Cell1 has colspan of 3 and cell 2 has colspan of 2
but I would like to keep the separate border collapse for the view. My approach was to put two tables above each other one for the data with opacity:70% for example to show the table below it and the table below it should have the vertical lines with each header. However, I'm unable in anyway to put two tables in the same position.
<div id="app">
<h2>Todos:</h2>
<ol>
<table
BORDER
>
<thead>
<tr>
<th >
H1
</th>
<th
>
H2
</th>
<th
>
H3
</th>
<th
>
H4
</th>
<th
>
H5
</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</ol>
</div>
Here is a fiddle of the table
http://jsfiddle.net/vrL9s7ft/6/
I have attached a working example here http://jsfiddle.net/whjnt5o2/1/
th, td {
border: 1px solid black;
box-sizing: border-box;
height: 100px;
width: 100px;
text-align: center;
}
table{
border-spacing: 0;
}
table.background-table{
position: absolute;
}
table.background-table th, table.background-table td {
border: 1px dashed gray;
top: 0;
}
<div>
<table class="background-table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
<table>
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</div>
I have a simple html table where i am trying to get the body to extend to the end of the headers/table. I need it to have horizontal scroll only for the body and have fixed headers.
I have a fiddle here that shows the issue.
http://jsfiddle.net/ZbdZe/54/
<table border="1" width="100%">
<thead >
<tr>
<th id="th1" width="50%">first</th>
<th id="th2" width="50%" >last</th>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 530px; overflow-y: scroll">
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
</tbody>
</table>
Right now it extendes only the first heading. I need it to extend the full width of the table with scroll. Thank you
This is to have fixed table header created by another table
Second table for the body of the table with scroll
table{
border-collapse:collapse;
width:100%
}
tbody{
border: 1px solid green;
table-layout: fixed;
}
div{
height: 66px; /*adjust table body*/
overflow-y: scroll
}
<table border="1">
<thead>
<tr>
<th id="th1" width="39%">first</th>
<th id="th2" width="50%" >last</th>
</tr>
</thead>
</table>
<div>
<table border=1>
<tbody>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
</tbody>
</table>
</div>
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>
My HTML is:
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; ">
No Border here, just white background
</th>
<th style="width:60%; background-color:gray" colspan="3">
Superheading</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
How do I remove the border in the top left cell ie the cell that contains "No Border here, just white background".
Thanks.
You could do it like this - DEMO
HTML:
<body>
<style>
table, table th, table td {
border:1px solid black;
border-collapse:collapse;
}
</style>
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; background-color:white;" class="border-less"> </th>
<th style="width:60%;text-align:center" colspan="3">Assumed Growth Rate</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
</body>
CSS:
.border-less {
border-top: 1px solid white;
border-left: 1px solid white;
}
try to add :
style="border: none";
on th tag or the tr tag containing the headers.Depending on what you need..
This fiddle uses CSS and a '.borderless' class.
However, if you wanted to stick to inline styling, you could do this:
<th style="width:40%; border:none;">
I have the following :
<table style="border:solid 1px; border-color:black">
<thead style="border:solid 2px; border-color:black">
<tr>
<th>
<p>Document Date</p>
</th>
<th>
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C01753</p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C00522</p>
</td>
</tr>
</tbody>
</table>
I'd like to add a border around the whole table and one around the whole header. The table border is showing nicely (Internet Explorer), but the header border is not.
PS: I use inline styles because it's meant for a HTML body in a mail message.
EDIT
The following gave me what I wanted in Firefox, not in IE though
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr style="border: 1px solid black">
...
EDIT
Added coloring
<table style="border: 2px solid black; border-collapse: collapse;">
<thead>
<tr style="border: 1px solid black; background-color: #EEE;">
...
Use rules="groups" and change your structure a bit:
<table style="border: 1px solid black; border-collapse: collapse;" rules="groups">
<thead style="border: 2px solid black;">
<tr>
<th>
<p>Document Date</p>
</th>
<th>
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C01753</p>
</td>
</tr>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C00522</p>
</td>
</tr>
</tbody>
</table>
EDIT: Well, that doesn's seem to work in IE. In that case, I'd suggest:
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr style="background-color: black; color: white;">
<!-- ... -->
You can't style a <thead> element, you need to style the <tr>
for example, like this
<table style="border:solid 1px black" cellpadding="0" cellspacing="0">
<thead>
<tr style="background-color: #EEE;">
<th>
<p>Document Date</p>
</th>
<th>
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
...
border styling does not apply, the normal thing is use the background color.
and btw border supports 3 attributes, including the color as well like
border: solid 1px black;
You can't style thead directly, but, you can style the child elements.
For example
<table>
<thead>
<tr>
<th>
<p>Document Date</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<p>18/03/11</p>
</th>
</tr>
</tbody>
If you want to style just the th of the thead, then your css is
thead th { mystyles }
JSFiddle
Try putting the style on your <tr> rather than <thead>.
Also, you can shorten the css like this: style="border: 2px solid black"
I don't think that that thead renders and is more for organisation. Style the row instead. UPDATE: tr does not support border either. Update version below.
EDIT
<table style="border:solid 1px; border-color:black;border-collapse:collapse;">
<thead>
<tr>
<th style="border:solid 2px black;border-right:none">
<p>Document Date</p>
</th>
<th style="border:solid 2px black;border-left:none">
<p>Buy-from Vendor No.</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C01753</p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<p>18/03/11</p>
</td>
<td>
<p>C00522</p>
</td>
</tr>
</tbody>
</table>
The border can be specified on a table or a cell (td or th). Specify a top and bottom border on all cells, a left border on the first cell and a right border on the last cell. To prevent gaps between the borders of cells the border-collapse style of the table needs to be set to border-collapse:collapse.