I am trying to implement "the unseen column" responsive table technique by assigning a class to a specific column that I can hide if the browser is too narrow.
Truncated dummy html example:
<!doctype html>
<html>
<head>
<style>
table {
width:100%;
background-color:#000;
border-spacing: 1px;
}
table tr {
background-color:#fff;
}
table tr:nth-child(2n+1) {
background-color: #ccc;
}
table tr.Title
{
color:#fff;
background-color:#0e228c;
}
table tr.ColumnHeadings
{
background-color:#e4e0d4;
}
#media only screen and (max-width: 1024px) {
.VolumeCell {display:none;}
}
</style>
</head>
<body>
<table>
<tr class="Title">
<th colspan="6">Stock Prices</th>
</tr>
<tr class="ColumnHeadings">
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th class="VolumeCell">Volume</th>
</tr>
<tr>
<td>AAC</td>
<td>Austrailian Agricultural Company Ltd</td>
<td>$1.39</td>
<td>-0.01 </td>
<td>-0.36%</td>
<td class="VolumeCell">9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>Ardent Liesure Grp.</td>
<td>$1.15</td>
<td>+0.02 </td>
<td>1.32%</td>
<td class="VolumeCell">56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>Ausenco Ltd.</td>
<td>$4.00</td>
<td>-0.04 </td>
<td>-.99%</td>
<td class="VolumeCell">90,641</td>
</tr>
</table>
</body>
</html>
This is all fine and dandy, except there is a single pixel border or space remaining on the far right of the table in some browsers, specifically Chrome 26. I've tried tweaking the border-collapse and border on many of the table elements in the media query. I've also tried setting negative margins to account for the pixel. Being the anal-retentive person I am, I can't let it go, but I would prefer not to use jQuery to solve this problem.
So how can I account for the missing column?
In case one has similar problem, but for colspan not expanding the whole row, in which case caption makes no sense.
A simple trick is to not hide desired columns with display: none;, but rather do
width: 0px;
This way column will still exist for colspan, all though not visible.
You can't modify the colspan attribute from CSS. If you really needed to change the value, you would have to modify the DOM.
However, instead of the "Title" class that you are using to encompass all the columns, you can use a <caption> element which does exactly what you want. It effectively is the title of the table. See http://www.quackit.com/html_5/tags/html_caption_tag.cfm
Here is a modified version of your markup that uses the caption element. When resized in Chrome it behaves how you would like.
table {
width:100%;
background-color:#000;
border-spacing: 1px;
}
table tr {
background-color:#fff;
}
table tr:nth-child(2n+1) {
background-color: #ccc;
}
caption
{
color:#fff;
background-color:#0e228c;
}
table tr.ColumnHeadings
{
background-color:#e4e0d4;
}
#media screen and (max-width: 1024px) {
.VolumeCell {display:none;}
}
<table>
<caption>
Stock Prices
</caption>
<tr class="ColumnHeadings">
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th class="VolumeCell">Volume</th>
</tr>
<tr>
<td>AAC</td>
<td>Austrailian Agricultural Company Ltd</td>
<td>$1.39</td>
<td>-0.01 </td>
<td>-0.36%</td>
<td class="VolumeCell">9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>Ardent Liesure Grp.</td>
<td>$1.15</td>
<td>+0.02 </td>
<td>1.32%</td>
<td class="VolumeCell">56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>Ausenco Ltd.</td>
<td>$4.00</td>
<td>-0.04 </td>
<td>-.99%</td>
<td class="VolumeCell">90,641</td>
</tr>
</table>
Related
I want to make my html table to take the full window width in a way that th elements content does not overlap + there are even spacing between column headings (see the picture).
The space must scale with window width up to 0 (all words are hugging each other). How to do it?
big screen example:
small screen example:
By default the spacing between th elements gets proportional to the width of the elements.
If I use table-layout: fixed the width of the columns will be equal, i.e. space between them unti-proportional to width.
P.S. I need to use border-spacing: 0 because I need to highlight full table rows and with positive border-spacing the table background will be visible inbetween cells.
P.P.S. the question is specifically about table layout. I know I can do anything with grid and flex box, but I'm trying to use right tags for right content, and in this case I have a table data, i.e. the solution should work with "display: table".
table {
width: 80%;
background: gray;
}
th {
text-align: left;
}
.auto {
background: #90EE90;
}
.fixed {
table-layout: fixed;
background: #ADD8E6;
}
<table class="auto">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
<table class="fixed">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
A probably a bit hacky only css solution would be to insert empty th/td elements and give them a realive width of 100% / amount of filled columns. Here 4 columns -> gap-width: 25% (use calc() if odd amount)
table {
width: 80%;
border-spacing: 0
}
th {
text-align: left;
}
th,
td {
border: 1px solid teal;
}
.gap {
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th class="gap"></th>
<th>333</th>
<th class="gap"></th>
<th>999999999</th>
<th class="gap"></th>
<th>22</th>
<th class="gap"></th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
</tr>
</tbody>
</table>
</body>
</html>
I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
I have several html tables in my content area of my page. The style is weird because it doesn't start the alternating row color fresh at the start of each table, it carries it on through out the list of tables.
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
White
</tr>
<tr>
Blue
</tr>
<tr>
White
</tr>
</table>
The colour in the rows is a representation of what the css would set as the row background. But I want css to start the alternating again for the next table. So it would be:
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
Does THBODY have anything to do with it?
Thanks,
CSS Code
table { border-collapse:collapse; text-align:center; }
table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }
th { color: #fff;
background-color: #5c87b2; text-align:center; }
tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }
Update
It may be a bug that has crept in, I've look on the suggested fiddles and it works perfectly so it is just some buggy code somewhere.
You can easily achieve it using combinations of :nth-child() by passing even and odd values. For eg. see this fiddle.
where, the CSS is
body {
background-color: black;
color: red;
}
table tr:nth-child(odd) {
background-color: blue;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
The only problem you have is missing the tag in the table.
It works perfectly if you add it. It shouldnt have anything to do with the tbody tag.
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
here is the fiddle: http://jsfiddle.net/rBwBm/
I think you're doing it using javascript, right ? Probably getting a collection of tr through jquery with $('tr') ? Try using CSS nth-child(odd) and nth-child(even) instead, most modern browsers won't have any problem with that.
The issue I was having was with two <TH> rows, which through off the alternating row colouring. So for example:
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
This would have the Blue start on the Name row and then start alternating. So the first line of the table body would be Blue
<tr>
<th>Name</th>
</tr>
This would have the Blue start on the Name row like before and then start alternating, However, the first line of the table body would be White
In these situations it would show a changing style which is not what I wanted to achieve. So all I did to fix this is:
<thead>
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<!-- Table Content in Here -->
</tbody>
And I then changed the style sheet to be:
tbody tr:nth-child(odd) {}
tbody tr:nth-child(even) {}
So basically I used the TBody and THead tags to make a more specific css style which is brilliant. More control, flexibility. So in my new example, you can have as many rows in the THead as you like, the content should always start on White, and to answer my question:
Does THead have anything to do with it?
Yes, it has EVERYTHING to do with it.
My example code:
<!DOCTYPE html>
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>
</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
wuut
</td>
</tr>
<tr>
<td>
test1
</td>
<td>
wuut1
</td>
</tr>
<tr>
<td>
test2
</td>
<td>
wuut2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<style>
table {
border-collapse: collapse;
}
</style>
You can just paste it here and see what it looks like : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
What I need is that when tables are inside each other, tables have like joined borders. Only tables that data are separated.
At the moment the right bottom corner of table has like 3 layers of border, but that just looks ugly.
I tried using CSS:
border-collapse: collapse;
But this just removed cellspacing for borders :/
It should look like this, but this is with colspan/rowspan, which is too messy:
<!DOCTYPE html>
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td colspan="3"> </td>
</tr>
<tr>
<td rowspan="3">400</td>
<td rowspan="3">500</td>
<td rowspan="3">test</td>
<td>test</td>
<td>wuut</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>wuut1</td>
<td>wuut2</td>
</tr>
</table>
</body>
</html>
Modify the program code that generates the markup so that there are no border=1 attributes and there are class attributes for td elements, controlling borders around each cell. The class attribute would corresponds to CSS settings that set a border on selected sides of a cell, e.g. <td class="left top"> with CSS code:
.left { border-left-style: solid }
.top { border-top-style: solid }
The width and color of borders you can set in one rule, like:
td { border-width: 1px; border-color: #333; }
You should still set table { border-collapse: collapse } and probably set padding: 0 on each cell that contains a table.
It’s a bit tricky, because the borders of nested tables are drawn separately. But you can tune things with some CSS3 so that they work in the desired way on modern browsers. (If you wish to achieve the effect on ancient browsers, too, you would need to scatter around a lot of class attributes.)
You need to remove the default cell spacing from (at least) cells containing tables. (The spacing between borders of inner and outer table come from the cells spacing.) This requires that each td that contains a table has a suitable class attribute, say class=containsTable, because in CSS you cannot refer to an element by its descendants (contents). Moreover, you need to selectively switch off top borders from the cells of the first row of any nested table, etc.:
.tableContainer { padding: 0; }
table table { border: none }
table table tr:first-child td { border-top: none; }
table table tr:last-child td { border-bottom: none; }
table table td:first-child { border-left: none; }
table table td:last-child { border-right: none; }
Try <table style="border:0;"> wont show borders if that's what your looking for and you can also be specific about which side you want to display like for example:
<table style="border-left:1px solid black;">
You can enter to the style border-(left,right,bottom,top):"pixels" "Type of border" "color".
<td style="border:0px;">
test
</td>
<td style="border:0px;">
wuut
</td>
</tr>
it wont show them. Or give them an ID and use <style type="text/css">
<style type="text/css">
#aa {border:0px;}
</style>
...
<td ID="aa">
...
if you can add ID="aa" to that loop then it should work.
Let's take 4 table columns - ID, Text, Date, Action. In my case table have always constant width - in example 960px.
How can I create such table as :
*-*------------------------------------*----------*----*
|1| Some text... |May 2011 |Edit|
*-*------------------------------------*----------*----*
|2| Another text... |April 2011|Edit|
*-*------------------------------------*----------*----*
As we can see, ID, Date and Action adjust their width to content, Text is as long as possible....
Is that possible to do without setting specific width of columns ? When ID = 123 or Date = November 2011, columns should automatically be wider...
Using a 100% width on the wide td and a fixed width for the table along with white-space:nowrap, this can be done:
Demo
HTML
<table>
<tr>
<td>1</td>
<td width="100%">Some text... </td>
<td>May 2011</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td width="100%">Another text... </td>
<td>April 2011</td>
<td>Edit</td>
</tr>
</table>
CSS
table
{
...
width:960px;
}
td
{
...
white-space:nowrap;
}
basically, it's just like this: http://jsfiddle.net/49W5A/ - you have to set the cell-width to something small (like 1px) to make them stay as small as possible.
but as you'll see, theres one problem with the date-fields doing a line-wrap. to prevent this, just add white-space: nowrap; for your text-field: http://jsfiddle.net/ZXu7U/
working example:
<style type="text/css">
.table{
width:500px;
border: 1px solid #ccc;
}
.table td{
border: 1px solid #ccc;
}
.id, .date, .action{
width:1px;
}
.date{
white-space: nowrap;
}
</style>
<table class="table">
<tr>
<td class="id">1</td>
<td class="text">Some Text...</td>
<td class="date">May 2011</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="id">2</td>
<td class="text">Another Text...</td>
<td class="date">April 2011</td>
<td class="action">Edit</td>
</tr>
</table>
My best advice to you is to not touch the widths of the table, the table automatically layouts in a way that does all cells best.
However, if you'd like to push through, I'd use width: 1px; on the cells that needs adjusting (one of each column is enough). Also use white-space: nowrap on all cells. that will make sure the lines don't break.
Try this:
.id, .date, .action is the table cells (td).
CSS:
.id, .date, .action {
width: 1em;
}
It worked for me.
The width:1em will not cut the text but force the width size to the minimum.
The best way that I've found for setting table column widths is to use a table head (which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
View Result
Alternatively, you can use colgroup as suggested here.