Quick-Question: how can this be achieved? (see image below)
Setting td width booth in plain html and with css had no effect.
The td width CAN vary but only with the same width for each row.
Use three separate <table> blocks, each with a single row having three columns of varying widths.
I don't believe it can in one table easily.
Instead, you have to use the colspan attribute to overlap cells on different rows.
For example, use 6 columns, the first row will have colspan = 2 , td, colspan = 2
The second row will have td, td colspan=2, td and so on.
It's quite messy - you might want to consider displaying your data in a different way, for example, using DIVs
It's a lot to look at, but you need a parent table with three rows where each row contains another table with three columns:
<table>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's a working jsFiddle to illustrate.
take 1 main table with 3 tr and in each tr take another sub table with 3 column than apply css
It's actually possible without this sub-tabling. I'm having this as a bug in my layout now. Just try playing around with paddings and margins inside cells :(
"Bug" works consistently across multiple browsers.
Edit:
Hunted that one.
td { display: block; }
Don't do it at home.
Related
Interesting problem. I have this code:
<table border="1">
<tbody>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
<td>
col4
</td>
</tr>
<tr style="display: block;">
<td colspan="4">
in ie 11 text only appears in col1
</td>
</tr>
</tbody>
</table>
Now if this is rendered in IE 11 (or Chrome) the span is broken and the 2nd row is restricted to the first column.
The challenge is I cannot change the html code. I'm looking for CSS only fix that could be applied to elements of the table structure?
Appreciate that this might not be possible, but be interested to know one way or the other.
Try this:
table tr:nth-child(2) {
display: table-row !important;
}
If there are multiple rows with the same condition then you can force all rows to behave as they should with:
table tr {
display: table-row !important;
}
I have html tables inside a huge table that I'm trying to get to to lay their cells horizontally dynamically generated by php. Right now my structure looks like this:
<table>
<tr>
<td>
<table>
<tr>
<td>
1
</td>
</tr>
</table>
<table>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
</table>
and the html my chrome browser is rendering outputs the cells like this:
1
2
instead of:
1 2
I know I can just as easily do this:
<table>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
and have my desired output of:
1 2
but I have some info that won't fit clean in a td cell in a table. Any help?
If you use "float: left" and put some text after the table, it positions next to the table, not in the bottom.
Use
td table {
float: left;
/*or:
display: inline-block;*/
}
Use float:left for table CSS
table{
float:left;
}
Fiddle here
I have a table without th elements, Only td elements are there. Is there any way to make My first row fixed(label). The table is like this
<table>
<tr>
<td>Name:</td>
<td>Age:</td>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
<tr>
......
</tr>
</table>
I want to make first row with the fields Name and Age as fixed. So that during the scrolling the labels will not disappear.
I've been searching for an answer for this problem for a while and finally I've found something that works very nice.
The secret is in this piece of code that makes the scrolling possible in the table
thead, tbody, tr, td, th { display: block; }
But you can find a full example here http://jsfiddle.net/T9Bhm/7/.
Hope it helps! :)
All of the solutions have a drawback: header row is not properly aligned with the content. One of the workarounds used was setting the width to some value (either absolute or percent).
Basing on pedromendessk answer I was able to find a neat solution to this question using answer from:
how-do-i-make-a-table-scrollable
So for the table presented in question solution would be:
tr:first-child {
position: sticky;
top: 0;
background: white;
}
Personally I'd use th for table headers, because using tr:first-child won't work correctly after adding thead and tbody.
i wrote plugin which can freeze any row (not only th) at the top of page or container. feel free to use it.
http://maslianok.github.io/stickyRows/
Setting position:fixed should do that for you:
<tr style="position:fixed">
<td>Name:</td>
<td>Age:</td>
</tr>
Edit:
<tr style="position:fixed;top:0;background:#FFF;">
<td>Name:</td>
<td>Age:</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
Example: http://jsfiddle.net/aVQjN/
On the row that you want to stay fixed, set the style position: fixed and set a background color to that row, or you will end up having two layers of text when you scroll the list.
Another issue to pay attention to is the fact that the first row will be hidden under the fixed row, due to how the fixed position style works. to fix this put in a blank row.
<table width="400" border="1">
<tr style="position: fixed; background-color: grey;">
<td width="200">
Name
</td>
<td width="200">
Age
</td>
</tr>
<tr>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
</table>
See link for my full code.
http://jsfiddle.net/brettadamsga/yeAhU/
Use of data table we can fixed the header and footer also.
Find the below Code......
tbl_Purcordr=$("#tbl_Purcordr").DataTable({
'paging': true,
'pageLength': 25,
'bLengthChange': false,
'sorting': false,
'filter': true,
'info': false,
'scrollY': 360,
'background': 'none',
'fixedHeader': {
'header': true,
'footer': true
}
});
Every time I create a HTML table, it starts on a new paragraph. Is it possible to override this behaviour, so that I have two tables on the same row?
I'm using also CSS.
You'll want to style them, display: inline; or float both the tables.
I've always found it easier to just create a table that contains the 2 tables if i want them to always be on same row.
<table>
<tr>
<td>
<table id="table1">
<tr>
<td></td>
</tr>
</table>
</td>
<td>
<table id="table2">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
styling works too though.
set display: inline-block; for each table.
online demo: http://jsfiddle.net/bitsmix/s7Bec/
jsfiddle
If you need the horizontally aligned tables to fill 100% width, you need:
display:inline-table; and float:left;
I want to learn what is the best practice to set a table size -the width- so that the contents in the cells will not go out of the table (especially horizontally) but they will be forced to stay in the cells.
Do I need to set width, height on the <table> element level or I should do it both for <tr> and <td> elements?
For example, this table:
<table>
<tr >
<td>
Name
</td>
<td>
Mr.Tuber
</td>
</tr>
<tr >
<td>
Surname
</td>
<td>
Tupova
</td>
</tr>
</table>
The contents of the cell will never go outside the tables as long as you're putting text in the cells.
A good way to build a table like this is to set the overall size of the table, as well as the widths of the columns, using CSS. Let the table expand vertically to accommodate the content automatically.
<table class="table1">
<tr>
<td class="col1">
Name
</td>
<td class="col2">
Mr.Tuber
</td>
</tr>
<tr>
<td>
Surname
</td>
<td>
Tupova
</td>
</tr>
</table>
CSS:
table.table1 {
width:500px
}
table1 .col1 {
width:200px
}
You don't need to specifically set col2, since it will take whatever space if left over. You may wish to also use TH instead of TD for the title cells so you can style those differently than the content cells.
.table1 th { ... }