I see there are a couple of posts about this around, including one on SO. However none of them answer the question, I am posting a newer one with an image that demonstrates the problem in 4 browsers.
FireFox renders the background image on the TR as I would like but as you can see none of the others do..
Does anybody have any ideas? At this point it looks like I need to go back to the drawing borad.
ps. adding backgound:none or background-image:none to TD doesn't fix this.
This is the code for my test case:
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body
{
background-color:#aaa;
}
table
{
background-color:#fff;
}
tbody tr
{
height:80px;
background:#aaa url("Content/LM_DROPDOWN_BG_BUTT_01.png") no-repeat bottom ;
position:relative;
}
tbody tr td
{
background-image:none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th style="width:200">Col1</th>
<th style="width:200">Col2</th>
<th style="width:200">Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
Would nested table work for you?
see the 3rd row
Works cross-browser. Not cute (nested table!), but gets the job done.
Styling <tr>is hum, problematic, especially cross-browser. After all, a tr can only contains td. It's not made to support other stuff (try <table><tr><td>1</td></tr><div>2</div></table> for fun).
Also, give Opera some love.
edit:however, you'll have to either have the same (fixed) width for the nested <td> (or the content), otherwise, the width of the <td> will be broken (not the same).
Related
I have a table with rows/columns inverted, as in HTML Table with vertical rows . I would like to divide some of the table cells in two.
HTML
<table border="1" class="test1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1 cell 2</td>
<td> row 1 cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td><table><tr><td>row 2,</td><td> cell 2</td></tr></table></td>
<td><table><tr><td>row 2,</td><td> cell 3</td></tr></table> </td>
</tr>
</tbody>
</table>
CSS
table.test1 >tbody > tr { display: block; float: left; }
table.test1 >tbody > tr > td { display: block; }
Note that I need to put tbody tag because some browsers add it automatically which could mess up my css instruction on direct children.
This works fine for 2x2 table, but the alignment of the cells get messed up already for 2x3 table (and I need to do this for larger table). Is there any way to do this with CSS only? (I would rather avoid java script). Thank you in advance.
Besides the fact that in most cases div container would make more sense you could use colspan for your table. This was introduced with HTML 4.01 was exactly designed for cases like this.
<table border="1" class="test1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td colspan="2">row 1 cell 2</td>
<td colspan="2"> row 1 cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2,</td>
<td> cell 2</td>
<td>row 2,</td>
<td> cell 3</td>
</tr>
</tbody>
</table>
.one {
background-color:green;
}
<tr>
<div class="one">
<td>td 1</td>
<td>td 2</td>
</div>
<td>td 3</td>
</tr>
this css command is not working, i want to turn two of the "td" cells into green but it is not happening tell me where i am going wrong. when I write "td" or "tr" instead of one(class name) then it is working properly but not with this class.
You should add class "one" to td directly, for your question div is not necessary element.
<tr>
<td class="one">td 1</td>
<td class="one">td 2</td>
<td>td 3</td>
</tr>
In html I'm using a to display a numbers of rows, then between each row is another row containing a single , that in turn contains a with style:none. This row contains additional information for the row above and in the ful code and can be toggled to display or not by clicking on a button on the album row.
The trouble is that even when the div is hidden the row takes up vertical height, I assume this is the height of the , but how can I fix this. Or another thought can I make the hidden or can I only do that for divs.
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div id="1" style="display:none">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Ive done a:
http://jsfiddle.net/ijabz/zz5zo2jh/
if you remove the hidden rows there is less of a vertical gap between the other rows
apply the style to your table row, not your div:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:none">
<td colspan="2">
<div id="1">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
You had to apply style to the tr. Modified your code as follows, now if display is block there is gap and when it is none, no gap:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:block;">
<td>
</td>
<td></td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
I'm not sure if i understood you question correctly, so please let me know if not.
If you use Jquery then this would add the display=none to the row with an
$(document).ready(function () {
$('table tr').each(function (i, row) {
console.log(i)//$(row).append("test");
Row = $(row);
if (Row.find("div:hidden").length == 1) {
$(Row).attr("display","none");
}
});
});
Updated your jsfiddle: http://jsfiddle.net/zz5zo2jh/25/
I hope it helps
See this JSFiddle.
Use border-collapse: collapse; on the <table> and padding: 0; on the <tr>.
<tr> elements normally have display: table-row; as default so I wouldn’t change that, because it might lead to some other rendering issues.
<table style="border-collapse:collapse;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td style="padding:0;" colspan="2">
<div id="d1" style="display:none;margin:1px;"></div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
the margin on the <div> is optional and is only there because the padding has been removed. This way it will look the same if the div is set to display: block;.
Is it possible at all?
I have table that fills its container. (width 100%)
Two of its columns (1st and 3rd) have minimum width, but middle one does not.
When I am narrowing the window, I want 1st and 3rd columns to stay at minimum width, while middle column have to collapse completely (when window is too narrow, just 1st and 3rd columns must be displayed).
Thanks.
There is simplified code of what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
.overflow{
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
.table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.first{
min-width: 20px;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="first"><div class="overflow">oneoneoneone</div></td>
<td class="second"><div class="overflow">twotwotwotwo</div></td>
<td class="first"><div class="overflow">threethreethree</div></td>
</tr>
</table>
</body>
</html>
You could do this with some basic CSS styling & media queries, here's an example
<table border=1>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
</tr>
</tbody>
<style>
#media only screen and (max-width:500px){
table td:nth-child(2), table th:nth-child(2) {
display:none;
}
}
</style>
So when the screen is smaller than 500px, the 2nd column will hide.
Fiddle showing it in action: http://jsfiddle.net/9rEgQ/2/
You could use CSS and a media query to hide the middle column when the screen reduced to a specified width.
For example:
#media all and (max-width:500px) {
.second {
display: none;
}
}
In this example, the second column would not be displayed when the screen was reduced to a width of less than 500px
According to this article at W3 Schools, one can create a basic table in HTML like this:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
From above, it appears that one enters data by rows.
I have a situation where I need to enter all of the data by columns. Is something like this possible?
<table border="1">
<tc>
<td>row 1, cell 1</td>
<td>row 2, cell 1</td>
</tc>
<tc>
<td>row 1, cell 2</td>
<td>row 2, cell 2</td>
</tc>
</table>
In modern browsers you can achieve this by redefining the TR and TD tags behavior in CSS. Given the HTML in your question attach the next CSS style:
table {
display: table;
}
table tr {
display: table-cell;
}
table tr td {
display: block;
}
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 2, cell 1</td>
</tr>
<tr>
<td>row 1, cell 2</td>
<td>row 2, cell 2</td>
</tr>
</table>
You can render tables in columns by using a table within a table...
<table>
<tr>
<td>
<table>
<thead>
<tr>
<td>column 1 header 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>column 1 row 1</td>
</tr>
<tr>
<td>column 1 row 2</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<thead>
<tr>
<td>column 2 header 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>column 2 row 1</td>
</tr>
<tr>
<td>column 2 row 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
You're best bet is to render the table by rows, and then use javascript to invert the table
http://jsfiddle.net/CsgK9/2/
The following code will invert a table (this sample code uses jquery)
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $(""); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
UPDATE:
Here is a version that works with th elements as well:
http://jsfiddle.net/zwdLj/
Just did this by using a bunch of uls filled with lis, seemed a lot cleaner than anything I could find. You'll have to do something like adding a class to all the uls and setting its style to display: inline-table.
#* pseudo html/razor *#
#foreach(var col in columns){
<ul class='tableColumn'>
foreach(var data in col){
<li>data</li>
}
</ul>
}
and some styling
.tableColumn {
border: 1px solid;
display: inline-table;
}
You can always create a parent element (the table), and then inside the table you can create in-line block elements with limited width to serve as your columns, that way any content you add to those child columns will follow the downward pattern, then to make the grid-like pattern just make sure to set the height of the elements within the column, like so Using the list to display content:
<div id="your_table">
<span style="width: 25%" id="fist_column"> <ul></ul></span>
<span style="width: 25%" id="second_column"><ul></ul></span>
<span style="width: 25%" id="third_column"><ul></ul></span>
<span style="width: 25%" id="fourth_column"><ul></ul></span>
</div>
I was in same situation where I have to add the data by column. But, this problem is solved in a simple method. I have used twig in this example, but you will get it easily.
<table>
<tr>
<th>id</th>
<th>title</th>
<th>ISBN</th>
<th>author_id</th>
<th>publisher_id</th>
</tr>
{% for book in books %} //for loop is used before the <tr> tag
<tr>
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.isbn }}</td>
<td>{{ book.publisher.id }}</td>
<td>{{ book.author.id }}</td>
{% endfor %}
</tr>
Note:{{ this is data to print }}