I have a simple, I want a scrollable table with aligned columns.
I tried this (from https://stackoverflow.com/a/11483686/1599054):
<table>
<thead>
<tr><th>loooooooooooooong</th><th>headers</th></tr>
</thead>
<tbody>
<tr><td>t</td><td>t</td></tr>
<tr><td>t</td><td>t</td></tr>
<tr><td>t</td><td>t</td></tr>
</tbody> </table>
And the CSS:
thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; }
td { height:50px; background:blue; margin:0px; cell-spacing:0px;}
You can see it here: http://jsfiddle.net/Rfgm2/1/
My problem is that I have a small content but big headers, is their a mean to "dynamically" aligne them?
I have found a working example for you. You must use a combination of div and table to achieve this:
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<th width="50%" style="word-wrap:break-word;">Short heading</th>
<th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:325px; height:48px; overflow:auto;">
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
jsFiddle here: http://jsfiddle.net/2ZnWL/1/
Remove display: block; from thead and tbody You are messing with the default styling of those elements by putting that there.
Fiddle
Related
I want to make table like this. A has 5row and B has 2.5row. I show another question about rowspan vlaue have to be integer. So I tried to revise totalrow is 6 and A is 6row , B is 3row, C is 1row and one is 2row. But I can't do like this image. If you can solve it, please talk to me.
Here's a basic example for you. You add the rowspan to the TD Tag and then on the subsequent rows, you have 1 less TD tag
table, tr, td { border:1px solid black; border-collapse: collapse }
<table>
<tr>
<td rowspan="2">Row Span 2</td>
<td>Normal Column</td>
</tr>
<tr>
<td>Normal Column</td>
</tr>
</table>
EDIT - Taking into account the fact that column B is 2.5 rows tall, and after review of the other answer, here is complete method, which uses both an extra table and rowspan
table, tr, td { border:1px solid black; border-collapse: collapse }
<html>
<body>
<table border=1 width=100% height=100%>
<tr>
<td rowspan="5">A</td>
<td rowspan="5" height=100%>
<table border=1 width=100% height="100%">
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</table>
</td>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
</tr>
<tr>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
</tr>
</table>
</body>
</html>
this is what table i need
I can easily get first and second row good but when i'm trying to make row third, I'm destroying row two.
I tried with width attribute and colspan but nothing work.
<table border="1px" width="100%">
<tr>
<td colspan="6">Cell 1</td>
</tr>
<tr >
<td colspan="3">Cell 2</td>
<td colspan="3" >Cell 3</td>
</tr>
<tr>
<td colspan="2">Cell 4</td>
<td colspan="2">Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</table>
A <table> will conform to it's content by default so there's no need for each column to be equal in width. So manually assign equal column widths by assigning table-layout: fixed to <table> then an equal width for each column by either assigning each width to the <th> in the <thead> of the first <tr> or lacking that assign widths to the <td> of the first <tr> (of course td or th as a selector works as well), see example below.
table {
table-layout: fixed;
}
td {
width: 16.5%;
text-align: center;
}
<table border="1px" width="100%">
<tr>
<td colspan="6">I</td>
</tr>
<tr>
<td colspan="3">II</td>
<td colspan="3">III</td>
</tr>
<tr>
<td colspan="2">IV</td>
<td colspan="2">V</td>
<td colspan="2">VI</td>
</tr>
</table>
JsFiddle URL : http://jsfiddle.net/gfy4pwrr/1
<table cellspacing="0" cellpadding="0" border="0" width="325" >
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class ='cont' style="width:325px; height:48px; overflow:auto;">
<table class='data' cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
<td>col 3 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
<td>col 3 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
<td>col 3 data 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
The columns are not aligned with the headers.
I want the table used for data to be aligned with the headers.
td width=100px for second table is not working.
I would get rid of the nested tables and use the semantics of the table element according to the w3c specs. The trick is to use the right elements but manipulate the way the browser displays them. <table>, <thead> and <tbody> can be displayed as block elements while every row can be a table (leaving <td> and <th> displayed as table-cell by default).
I've demonstrated it in a JSFiddle. But it basically comes down to a simple table structure:
<table>
<thead>
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
<td>col 3 data 1</td>
</tr>
</tbody>
</table>
And setting the display properties in css with an overflow on <tbody>:
table, tbody, thead {
display: block;
}
tbody, thead {
overflow-y: scroll;
}
tbody {
height: 100px;
}
tr {
display: table;
...
}
To come back to the problem with the column width's. There is no other way solving that than setting the same width on each cell in each table (<tr>). In the fiddle I set it to 33.33%:
td , th {
width: 33.33%;
...
}
For Windows it is necessary to show the scrollbar in <thead> otherwise it doesn't size the same as <tbody>. To hide it there is a small trick:
thead {
margin-right: -300px;
padding-right: 300px;
}
It's not that the "columns are not aligned with the headers", the problem is that your second table does NOT have any header. You just have nested tables. One with headers th and second with no header, just td.
Basically your thare not in the same column as your td
So both tables, even if the width is the same, will adjust the width of the cells depending on the content inside. It's just happen all your tdhave same content (in number of charachters) so the effect was that they are slightly missaligned.
However if you set a fixed width to both thand tdand display them as ìnline-block`elements they will align: FIDDLE
However I don't recomend to change the display of the cells on a pure html table. You may have headaches incoming. (and also I don't recomend tthe use of nested tables... I had so many headaches back then when layouts were made that way... ty explorer)
Collapse the borders: border-collapse: collapse; and set box-sizing: border-box;
http://jsfiddle.net/gfy4pwrr/6/
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
td, th {
/* if it is 100px the overflow content in the first column "push" the border ?? */
width: 99px;
max-width: 99px;
overflow: hidden;
}
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300">
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class='cont' style="width:325px; height:48px; overflow:auto;">
<table class='data' cellspacing="0" cellpadding="1" border="1" width="300">
<tr>
<td>VeryOverflowContent long long long content</td>
<td>OverflowContent</td>
<td>col 3 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
<td>col 3 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
<td>col 3 data 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I guest you want a fixed header table.I recommend you change your html to easy build a fixed header table.
Here's my suggestion:
<div class="table-header">
<table>
<thead>
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</thead>
</table>
</div>
<div class="table-content">
<table>
<thead>
<tr>
<th>Full Name</th>
<th>Status</th>
<th>Last reported</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
<td>col 3 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
<td>col 3 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
<td>col 3 data 3</td>
</tr>
</tbody>
</table>
</div>
and css:
.table-header
{ padding-right:13.5px;
}
.table-header table
{
height:20px;
}
.table-header thead tr
{
background:#fff;
z-index:10000;
}
.table-content
{
max-height:250px;
overflow-y:auto;
overflow-x:hidden;
margin-top:-20px;
}
.table-content thead
{
visibility:collapse;
}
table
{
border-collapse: collapse;
}
table th, td
{
border: 1px solid black;
width:200px;
text-align:center;
padding:0;
}
look at:http://jsfiddle.net/chuongxl/gfy4pwrr/51/
or you can use this plugin http://www.fixedheadertable.com/
I'm trying to solve a specific problem with CSS selectors. I have the foillowing HTML:
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
What I need to do is select the first occurence of the class "Region" within the document, and then select the th element, which contains the text "Header 1" (there will only be 1 th element within these tables). My reason for this is so i can apply a background color to this element.
I currently have this css which applies background color to the th elements of the two "Region" tables:
TABLE.Region TH {background-color: #00A5DB;}
But I want to apply background-color: #BAD80A to only the first occurence of "Region"
I know I can achieve this using javascript and I know this is an old way of arranging elements on a page, but this is a change to a company intranet with many pages, so changing just the style sheet would be by far the quickest way of acheiving this, as I don't really have the time to make sweeping changes at the moment! We use IE11 as our main browser, so the answer can be quite specific if necessary.
Any help would be appreciated!
Thanks
You can use the first-child psuedo-selector on the td and then target the th inside .region.
Here's a demo:
td:first-child .Region th {
background-color: red;
}
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
/*Both work fine*/
table.Layout td:first-child th{
background: #555;
}
td:first-child th{
background: #555;
}
JSFiddle - http://jsfiddle.net/uL9uLLuf/
I have a problem creating a proper table layout.
I need the table to have a specific width, with 3 columns (no problems so far).
The problem is that I need the 2nd column needs to be only the width of its content, and no bigger, and that column has to dynamically adapt to that content.
The other two should take up the rest of the width of the table.
Example:
---------------------------------------------------------------------------------
| |Here is the main text| |
---------------------------------------------------------------------------------
DEMO FIDDLE
HTML
<table>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
</table>
CSS
table {
width:100%;
}
td {
border:1px solid grey;
}
td:nth-child(2) {
width:1px;
white-space:nowrap;
}
use colspan in html
see fiddel # http://jsfiddle.net/8HtZu/
<table style="width:100%;text-align:center;border:2px solid #800" border="1px">
<tr>
<td colspan="3">Title</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Hopefully this will do the trick
HTML:
<table>
<tr>
<td>Test</td>
<td class="dynamic">This is some longer text</td>
<td>some other stuff;</td>
</tr>
<tr>
<td> </td>
<td class="dynamic">This is some longer text and longer;</td>
<td>some other stuff</td>
</tr>
</table>
CSS:
table
{
border: 1px solid #000;
}
table td
{
border: 1px solid #000;
}
td
{
width: 33.3%;
}
td.dynamic
{
width: 1px;
white-space: nowrap;
}
Demo: http://jsfiddle.net/vdFwF/
You need to assign min-height to each td elements.
Try this Jfiddle.
JSfiddle
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="100%" colspan="3"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="100%" colspan="3">
<center>your content </center>
</td>
</tr>
</table>