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>
Related
I'm really having a hard time understanding how to style column widths in a HTML table. I can't get my head around why percentage widths aren't applying and why columns inside tfoot affect column widths in tbody.
Can anyone shed some light on this and perhaps explain how I can make the columns within the tbody be set to one-third (33.333%) and columns in the tfoot be set to one-half (50%) and actually span the full width of the table (right now they only span across 2 columns above, rather than 3 columns)?
Any help/guidance would be most appreciated.
tbody,
tfoot {
width: 100%;
}
tbody tr td {
width: 33.333%;
}
tfoot tr th,
tfoot tr td {
width: 50%;
}
<table border="1">
<tbody>
<tr>
<td>Body Row 1 Column 1</td>
<td>Body Row 1 Column 2</td>
<td>Body Row 1 Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer Row 1 Column 1</th>
<td>Footer Row 1 Column 2</td>
</tr>
<tr>
<th>Footer Row 2 Column 1</th>
<td>Footer Row 2 Column 2</td>
</tr>
<tr>
<th>Footer Row 3 Column 1</th>
<td>Footer Row 3 Column 2</td>
</tr>
</tfoot>
</table>
If you are not restricted so that you have to use one table, why not just a table inside a table?
<tfoot>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td>First half</td>
<td>Second half</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tfoot>
Just make sure the styling applies just as well and give your table table { width: 100%; }, no border, margin, padding, etc..
I find the best solutions are those where you ignore the problem.
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;.
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 }}
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).
how can i increase the space in this table "Row 1, cell 1"?
<html>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
</html>
pls check here for the image:
http://img227.imageshack.us/img227/6166/htmln.png
is this correct:
<table border="1" td.my-cell { padding:100px; }>
<tr>
<td class="my-cell">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can either use cellpadding or using css
.cellpadding {
padding-left: 5px;
padding-right: 5px;
}
<td class="cellpadding">Row 1, cell 1</td>
EDIT Your edited post is wrong....do this:
<table border="1">
<tr>
<td style="padding-left: 5px; padding-right: 5px;">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can add a class to that specific cell and then use that class-name to apply css:
.larger {
height: 2em;
width: 4em;
padding: 2em;
}
<!-- rest of table -->
<td class="larger">Row 1, cell 1</td>
<!-- rest of table -->
Or you could use specific style-rules to apply a particular style:
tr td:first-child /* selects the first td within a tr */
Though this would apply to the first td of every row.
elaborate on "space"? you can add padding to the td if thats what you mean by "space"
table td { padding:5px; }
if you just want that cell bigger, add a calss
table td.my-cell { padding:5px; }
<td class="my-cell">Row 1, cell 1</td>
or do you mean
<td>Row 1, cell1</td>
you can increase the space between words like this:
table td { word-spacing: 20px; /* adjust */ }