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
Related
Say I have a simple table like this:
<table>
<tr>
<td>
cell
</td>
<td>
cell
</td>
</tr>
<tr>
<td>
cell
</td>
<td>
cell
</td>
</tr>
</table>
Then, I add borders between the columns with this css:
td:not(:last-child){
border-right:1px solid black;
}
But then I get spaces on the border between each row D:
I want it to look like this:
How can I get rid of these spaces?
http://jsfiddle.net/Tgr48/
Collapsing the table border will do that:
table {border-collapse:collapse;}
I have a table as follows
<table border="1">
<tr>
<td style="display:table-row">
Apple
</td>
<td style="display:table-row">
Banana
</td>
<td style="display:table-row">
Candle
</td>
<td style="display:table-row">
Digital drive
</td>
</tr>
</table>
Output is as follows
I want to change the output to show only the first two columns in the first row and then the last two columns in the second row without changing the structure of the table html but only changing the display property . Is there any css which lets me achive this ?
Try this:
table td {
border: none;
}
table td:nth-child(-n+1),td:nth-last-child(-n+2) {
float: left;
}
JSFiddle link
It will only make first two column and last two column in single row.
You can use css:
display: none;
Initially i would suggest don't change td default behaviour we have specification for each tag follow it. and you can achieve that display using visibility:hidden; or display:none; to the table-row
<table border="1">
<tr>
<td>
Apple
</td>
</tr>
<tr>
<td>
Banana
</td>
</tr>
<tr>
<td>
Candle
</td>
</tr>
<tr>
<td>
Digital drive
</td>
</tr>
</table>
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.
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 { ... }