I have a table that has one row of tableheaders in it. The table has a height of 195px, and when it is rendered (js/jquery) the first row stretches the entire height of the table. How can I make it so the table row stays the default height? I have tried using tr:first-child to set the height statically but it isn't working.
<table class="tabled">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<style>.tabled { height: 195px; } .tabled tr:first-child {20px; }</style>
This <tr> stretches the entirety of 195px when it is the only row in the table.
You coud set the height via CSS by applying a class to the header row
<table class="tabled">
<tr class="header">
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<style>.tabled { height: 195px; } .header { height: 20px; }</style>
Related
I believe the width: 1px; white-space: nowrap; trick worked before but it seems not anymore now? Ref. CSS table column autowidth (there the table was also in fixed layout but thats back in 2011)
Here is the HTML and CSS:
table {
table-layout: fixed;
width: 100%;
}
td,
th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
width: 1px;
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2 even width</th>
<th>Column 3 even width</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td class="auto">Data4</td>
</tr>
</tbody>
</table>
I also have an example setup in the following jsfiddle:
http://jsfiddle.net/hCkch/21/
How do you make the last column auto width based on the content while the other columns respect table-layout: fixed?
Note: the three columns given above is just an example. So please no hardcoded answers to make each column width 100/3%. This is a general question and the answer should fit for n columns with even width but the last one auto width based on the content.
With table-layout, you will want to set the widths of the cells in the first row of the table (https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). You'll also want to add a width of 100% for the final column that is meant to auto-expand. Here is an edit of your jsfiddle:
http://jsfiddle.net/jessbodie/hCkch/31/
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th class="col1st">Column 1 even width</th>
<th class="col2nd">Column 2 even width</th>
<th class="col3rd">Column 3 even width</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td class="auto">Data4</td>
</tr>
</tbody>
</table>
table {
table-layout: fixed;
width: 100%;
}
td, th {
border: 1px solid red;
padding: 15px;
}
.col1st {
width: 100px;
}
.col2nd {
width: 100px;
}
.col3rd {
width: 100px;
}
.auto {
width: 100%;
white-space: nowrap;
}
For making the first n columns the same width, in SASS you can use the calc function to come up with the widths.
As mentioned in the comments, the only way I know to do this that should work cross browser is to get rid of table-layout: fixed; and set the width of the remaining columns. Fixed layouts are good for lots of things but automatically calculating based on content doesn't seem to be one of them.
table {
width: 100%;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
width: 33.33%
}
.auto {
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
I realize you clarified that you don't want markup specific rules, but it does in fact accomplish your goal with the one requirement that you know how many columns you will be dealing with beforehand. In general, this should not be prohibitive.
Another possibly work around is to assign the widths client side using js after the fact:
$(document).ready(function() {
var width = 100 / $('table tr:first th:not(.auto)').length;
var cols = $('table th:not(.auto)');
cols.css('width', width + '%');
});
table {
width: 100%;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
And finally, I'll mention there is a Firefox specific implementation of min-content that actually does exactly what you want. Unfortunately, it only works on Firefox:
table {
width: 100%;
table-layout: fixed;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
width: -moz-min-content;
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
This question already has an answer here:
Fixed header table, scrollable body to occupy 100% height of resizable DIV
(1 answer)
Closed 7 years ago.
I am trying to create a table with a header that is fixed at the top of the page as the user scrolls the table headings still appear on the top of the page. But the width of the table headings is not the same as the width of the table. Here is an example:
<html>
<head>
<style type="text/css" media="screen">
thead
{
position: fixed;
top: 0;
}
</style>
</head>
<body>
<table border="1" cellspacing="5" cellpadding="5">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</tr>
</thead>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4c4</td>
</tr>
</table>
</body>
</html>
How can I make my headings the same width as the table?
JSFiddle
Please add tbody tag after completing this thead tag and remove position : fixed in thead class css
I have a basic question regarding tables and columns in HTML. I would like to have two different tables on the same page but each table with a different number of columns. First table with six columns and second with only three. Now what happens is that the columns in the second table aren't centered with the ones in the first table, they're all to the left. What to do in order that the three columns in the second table take as much place as the six columns in the first table?
Here's my code, thanks for helping
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<h2>title 1</h2>
<table>
<col class="number"></col>
<col class="description"></col>
<col class="reference"></col>
<col class="candidate"></col>
<col class="difference"></col>
<col class="score"></col>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
<th>column 5</th>
<th>column 6</th>
</tr>
</thead>
</table>
<h2>title 2</h2>
<table>
<col class="number"></col>
<col class="description"></col>
<col class="diagram"></col>
<thead>
<tr>
<th colspan="2">column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
</table>
</body>
</html>
CSS definitions
.highlight
{
background:#f8f6f6;
}
.clicked
{
background:#c4c0c0;
}
h2
{
text-align:center;
}
body
{
font-family:Times New Roman, Georgia, Serif; font-size:14px;
}
table
{
width:100%;
font-size:14px;
table-layout:auto;
border-collapse:collapse;
background:#FFFFFF;
}
table th
{
font-weight:bold;
color:#FFFFFF;
text-align:left;
padding:7px 15px;
background:#373736;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373736', endColorstr='#999a99');
background: -moz-linear-gradient(bottom, #999a99, #373736);
background: -webkit-gradient(linear, left bottom, left top, from(#999a99), to(#373736));
}
table td
{
vertical-align:top;
text-align:left;
padding:7px 15px;
}
Here they are all centered, look: jsfiddle.net/89eZ7/
i have a HTML table in which i want to make 1st Row fixed while i scroll, I'm able to make fixed Header Row but i also wanted my 1st Row of my table also be stay fixed. Its been 2 days I'm trying' with no success. Anybody out there had run into this kind a problem ?
<table>
<thead>
<tr>
<th>Header 1</th><th>Header 2</th> // this i have fixed already
</tr>
</thead>
<tbody>
<tr>....</tr> // this row i want to make fixed while i scroll.
<tr>....</tr>
</tbody>
</table>
JSFiddle till now i'hv got this from net
Table can have more than one tbody elements, so you can add this fixed row to first tbody, and rest rows to the second tbody. Then is just some play with css to set it right.
Working demo: http://jsfiddle.net/sMMZ9/4/
Demo is based on this solution
You need to insert first row inside the <thead> element and apply the same css as you have applied for th element:-
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</thead>
CSS
html > body thead.fixedHeader td {
width: 200px;
}
You can also add border as per your design.Hope it'll help you for sure.
How's this:
.scrollContent > tr:first-child{
position: fixed;
}
I have a matrix that I am showing in html table. I have my header row (th) but I am trying to see if there is such things as header column that I can style similar to header row. Right now I am using a class=odd and class=even on my TR in my Tbody so I am not sure if there is a way to have a column overwrite this row css logic.
Given this markup:
<table>
<thead>
<tr>
<th> </th>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<th>Row 1</th>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr class="odd">
<th>Row 2</th>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
You could use this CSS:
thead th {
background-color: red;
}
tr.even td {
background-color: blue;
}
tr.odd td {
background-color: yellow;
}
tbody tr.odd th, tbody tr.even th {
background-color: green;
}
See this in action here.
It might seem odd but try the <col> tag, you don't see it very often but I think it's great!
<table width="100%" border="1">
<col style="background:red;" align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Of course you'd want to put a class on the <col> tag as opposed to writing the style right in there.
Also I'd combine this with the other folks answers when it comes to the CSS. As for using pseudo classes for even/odd, if you want to retain compatibility with IE6 you'll need to apply the striping with JavaScript, or your application code.
you can target a column using CSS td:first-child or make the header cells th instead of td and differentiate using thead th and tbody th