This is my code:
I need to add a scroll bar in the body of the table, the header must remain constant.
The body cells are not properly fixing if I add a scroll bar.
I need to add a scroll bar in the body of the table, the header must remain constant.
The body cells are not properly fixing if I add a scroll bar.
<table width="600" border="1" style="border-collapse:collapse; border: 1px solid #AEAEAE;" cellpadding="0" cellspacing="0">
<tr>
<th rowspan="2">
Title
</th>
<th rowspan="2">
Title
</th>
<th colspan="4">
Title
</th>
<th colspan="2">
Title
</th>
</tr>
<tr>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
</tr>
<td height="400">
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
</tr>
Just give the table's tbody element a height and a scrolling overflow.
Like this:
.tableClass tbody
{
height: 300px; /* Random number I chose */
overflow: scroll /* you can be more specific and use overflow-y */
}
Edit:
I saw your code and your not using <tbody> and <thead>. Read about them. The general idea is to wrap the table's content with one element, and to wrap the table's headings with one element.
Here's a working example:
http://www.imaputz.com/cssStuff/bigFourVersion.html
None of the other solutions I've found met all my requirements, so I created a very lightweight jQuery plugin to do this. It supports fixed header, footer, column spanning (colspan), resizing, and an optional number of rows to display before scrolling starts.
jQuery.scrollTableBody (GitHub)
As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:
$('table').scrollTableBody();
Related
I'm trying to figure out why the 2 rows are so far apart, since there is no additional height on the inner tables. Inspecting the height in Chrome shows that the topmost TD has 50px, while the table underneath is 24px.
Why is this the case?
<table width="540px" height="94px" style="background-color: #fafbfc;">
<tbody>
<tr>
<td style="padding:0 0 0 55px;vertical-align:middle;">
<table style="border-collapse:separate;">
<tbody>
<tr>
<td>
<span style="display:block;padding:0px 15px;">First field</span>
</td>
<td>
<span style="text-decoration:none;display:block;padding:0px 15px;">Second field</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0 55px 0 55px; vertical-align:middle;">
another
</td>
</tr>
</tbody>
</table>
This is due to cellpadding and cellspacing.
According to this geeksforgeeks article
Cellpadding specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the content of the cell.
Cellspacing specifies the space between cells (i.e) it defines the whitespace between the edges of the adjacent cells.
If you want both td to have same height, then provide cellpadding="0" cellspacing="0" attributes to both outer and inner table tags.
The answer is ultimately the width and height attributes you have added.
If you wish to have these, they should go within the style attribute
I have taken out most of the styling just for ease of the snippet.
I would also recommend making use of the thead and <th> elements. As they relate sole to headings in tables. https://www.w3schools.com/tags/tag_th.asp
<table style="background-color: #fafbfc;">
<thead>
<tr>
<th>
<span style="display:block;padding:0px 15px;">First field</span>
</th>
<th>
<span style="text-decoration:none;display:block;padding:0px 15px;">Second field</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:0 55px 0 55px; vertical-align:middle;">
1st column data
</td>
<td style="padding:0 55px 0 55px; vertical-align:middle;">
More data
</td>
</tr>
</tbody>
</table>
Nesting a table inside another table is not a good idea, that is why you have an unexpected result. When there's table nested inside another table, you may start to get unwanted styles. This is because parent table styles will also affect the child table. For example, if you add height on the parent table, it will affect the child table too.
<table>
...
<table>
....
</table>
</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>
How can I centralize a thead text in HTML tables?
I'm trying this:
...
<thead rowspan="3" align="center">
<th> Table </th>
</thead>
...
<th style="text-align: center"> Table </th>
Try giving th width of 100% with text-aling:center as style property
I currently have a table that looks like this:
http://s8.postimg.org/gybzti0rn/Screen_Shot_2015_02_27_at_1_30_23_PM.png
I want to move the description of the boat up to the top of the image. I tried using valign="top", but this moved the description to the very top of the table, where the boat name is.
Here is my HTML:
<table border ="1">
<tr>
<th> Boat Name </th>
<th rowspan="2">Description</th>
</tr>
<tr>
<td><img src="boatimage.png"></td>
</tr>
</table>
Thanks in advance for the help!
Try adding a padding
<table border ="1">
<tr>
<th> Boat Name </th>
<th rowspan="2" style="vertical-align:top;padding-top:25px">Description</th>
</tr>
<tr>
<td><img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"></td>
</tr>
</table>
Because of the rowspan you added it will cover 2 row on that description <th> header and place text description accodingly in this case you have to manually adjust it by adding padding to align it to image <td> row border.
Fiddle
Can you make the question a bit clearer?
Maybe try CSS
<th style="display:block;position:relative;top:20px;" rowspan="2">
That will move it 20px from the top of it's cell
I'm trying to align 3 tables so they form 1 big table.
The reason I want to do this is because I want to have scrollable table which works on tablets(ipad, android). I already got this working the only thing I still need to do is align the headers and footers with the content. My table layout looks like this :
<!-- Fixed header table -->
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead>
<th> Header 1 </th>
<th> Header 2 </th>
<th> Header 3 </th>
</thead>
</table>
<!-- Scrollable content table -->
<div class="scroll"> <!-- This div enables the table to be scrollable -->
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead> <!-- Use a thead or JQuery Mobile 1.4 gets mad -->
<tr> </tr>
</thead>
<tbody>
<!-- This is dynamically filled -->
</tbody>
</table>
</div>
<!-- Fixed footer table -->
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead>
<tr> </tr>
</thead>
<tfoot>
<tr>
<td> Footer 1 </td>
<td> Footer 2 </td>
<td> Footer 3 </td>
</tr>
</tfoot>
</table>
I already tried to give every cell a max width but it didn't seem to work.
Isn't there a default solution for this ?
Thanks in advance.
Edit:
I want it to be aligned like this :
http://i.imgur.com/Cipa9f6.png
You need to set table-layout to be fixed then only width works as expected.
table{
table-layout: fixed;
}
th,td{
width: 50px;
}
demo
table has auto by default so it will increase the width as your contents increases and by setting to fixed to will be fixed width.