For example, I want to set the ratio of width of red:green:blue be 1:2:1 relative to parent, I tried using em, which seems got my desired result:
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:2em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
but the element doesn't disappear when it has 0em:
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
And according to the description of em, it seems unlikely used to define the relative width/height of element.
Is using em the correct way?If not, what is the correct way to achieve this?
Table element has cellspacing and cellpadding. Set cellpadding="0" like following. It will resolve your issue.
<table style="width:100%;height:50px;" cellpadding="0">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
This is called "cell-padding" simply give your table cell td a padding: 0;
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;padding: 0;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
EDIT: After reading your post again, what you're searching for is percentage. This will allow you to use a percentage of the parents width.
A 1:2:1 ratio will be 25% : 50% : 25%
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:25%;">
</td>
<td style="height:100%;background-color:green;width:50%;">
</td>
<td style="height:100%;background-color:blue;width:25%;">
</td>
</tr>
</table>
<table style="width:100%;height:50px;border-collapse: collapse;">
<tr>
<td style="height:100%;background-color:red;width:50%;">
</td>
<td style="height:100%;background-color:green;width:0;">
</td>
<td style="height:100%;background-color:blue;width:50%;">
</td>
</tr>
</table>
Instead of em you can use %. check snippet below. Also add cellpadding="0"
<table style="width:100%;height:50px;" cellpadding="0">
<tr>
<td style="height:100%;background-color:red;width:25%;">
</td>
<td style="height:100%;background-color:green;width:50%;">
</td>
<td style="height:100%;background-color:blue;width:25%;">
</td>
</tr>
</table>
or you can go with flexbox
ul {
list-style: none;
display: flex;
padding: 0px;
}
li {
flex-grow:1;
}
li.double {
flex-grow: 2;
}
<ul>
<li style="background-color:red;">1</li>
<li class="double" style="background-color:green;">2</li>
<li style="background-color:blue;">3</li>
</ul>
I would insist not using tables for layout purposes and instead use divs but for your answer
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:50%;">
</td>
<td style="height:100%;background-color:green;width:0;">
</td>
<td style="height:100%;background-color:blue;width:50%;">
</td>
</tr>
</table>
Related
I'm totally stuck trying to figure out why setting a td width attribute in the following table is throwing off the display.
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
The above is rendered with the word "Invested" outside of the table entirely (see screenshot).
Any thoughts on why this might be happening? Thanks in advance!
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
</tr>
</tbody>
</table>
Problem:
All you have to do is to format your code. There is a NON-BREAKING-SPACE between td and style <td style (the one with the Investment text) that destroys the layout. To reproduce you can delete the whitespace and add the whitespace again.
Note:
You have to <big><big> there wrapped - this can be reduced to just one element.
<table style="width:100%">
<tbody>
<tr>
<td colspan="4">
<big><b>Investments By Bruce Wayne</b></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
Please help me how to align this structure properly. I would like to decrease the size of td "Todays Special" to considerable height. This td grows based on my value say if new fruits added then the header td also grows.
Be kind to help me to resolve this
<table>
<tr>
<td class="title">Todays Special</td>
<td>
<div style="height: 120px; width:100%;overflow-y:auto;">
<table style="height: auto; width:100%;" valign="top">
<tbody>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">6</td>
<td colspan="4" class="title">mango</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">23</td>
<td colspan="4" class="title">orange</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">29</td>
<td colspan="4" class="title">banana</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">47</td>
<td colspan="4" class="title">papaya</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">11959</td>
<td colspan="4" class="title">kiwi</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
If you edit the "Todays Special" td, you can set the desired width and font-size through the style property of the td tag. And also set the alignment you want.
As you are not making a Table header from a row, you have to set different styles to the main td and the rest of the table.
Hope I helped.
Assuming you just want to match the height of the column Todays's Special. You can do this by adding the rowspan according to the no. of items in the list
<td class="title" rowspan="5">Todays Special</td>
<div>
<table style="height: auto;" valign="middle">
<tbody>
<tr>
<td class="title" rowspan="5">Todays Special</td>
<td class="title">6</td>
<td class="title">mango</td>
</tr>
<tr>
<td class="title">23</td>
<td class="title">orange</td>
</tr>
<tr>
<td class="title">29</td>
<td class="title">banana</td>
</tr>
<tr>
<td class="title">47</td>
<td class="title">papaya</td>
</tr>
<tr>
<td class="title">11959</td>
<td >kiwi</td>
</tr>
</tbody>
</table>
</div>
This sounds very similar to previous questions, but I've not found something that matches what I'm trying to do here.
My current code (very verbose with everything in line) looks like this:
td { border: 1px solid black }
<table style="table-layout:fixed">
<tr>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
</tr>
<tr>
<td style="width:25%;text-align:center">Some text here</td>
<td style="width:25%;text-align:center">More text</td>
<td style="width:25%;text-align:center">Hi</td>
<td style="width:25%;text-align:center">Somewhat longer text</td>
</tr>
</table>
What I'm trying to accomplish should look like this:
That is, the four main columns should all be the same width, which is the width of the largest content of any of the columns.
The green columns should always be 30px, and the red and blue columns should fill the remaining space each side of that middle column, only up to the width available in the auto-sized outer column.
Setting the internal tables to 100% width makes this happen, but of course the outer table then takes up the entire page width.
I'm also aware that using tables for this is probably not a great idea now we can use CSS, but I'd like to get this example working in tables before 'translating' it.
I'm very opposed to using JavaScript to solve this, for the record!
Edit: I also tried putting all 'subcolumns' in one row, and setting the text to colspan three at a time, with the 25% then applied to that. This ended up confusing the engine, and the width ended up about 75% of the page.
<table style="table-layout:fixed" border="1">
<tr style="font-size: 1px;">
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
</tr>
<tr style="font-size: 6px;">
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center">Some text here</td>
<td colspan="3" style="text-align:center">More text</td>
<td colspan="3" style="text-align:center">Hi</td>
<td colspan="3" style="text-align:center">Somewhat longer text</td>
</tr>
</table>
this might solve your answer, your previous code html elements are not properly closed look on that also.
How is that possible that this work:
<TABLE>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
but if I put spaces between "-" it doesn't. I knew that it doesn't matter in HTML the position of elements(I mean, in this case). Why?
CSS solution:
If I get it right, you want to put - between two spaces, so you will simply need to simulate this using padding: 0px 5px; with your td elements, this is a snippet DEMO:
table td {
padding: 0px 5px;
}
<TABLE>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
</TABLE>
This will show - as " - " inside the td elements.
HTML solution:
If you want to use HTML only without CSS, the solution will be to use cellpadding=5 with your table, this is a working snippet:
<TABLE CELLPADDING=10>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
</TABLE>
But this will make spaces between tr elements too, in other words it will make padding-top and padding-bottom too for your td elements.
Conclusion:
So your requirements will be better achieved using paddingin CSS, now it's up to you to choose the right solution.
I have a table with a lot of records and a search box
<table>
<tr>
<td class="col-3">name1</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
.col-3{
width:33,33%
}
Some of the records may be displayed as none, so if the search box returns a full "none" column it gets wraped to none as if it didnt have the "witdh:33,33%" atribute.
Anyone knows a way to keep the elements in his original size even if they dont have content?
Thanks in advance.
Try table-layout: fixed along with a fixed width for the table
table {
width: 100%;
table-layout: fixed;
}
.col-3 {
width: 33, 33%;
border: 1px solid grey;
}
<table>
<tr>
<td class="col-3">name1 askdlhaslkdhsaldsad asjd;kadaj as;dj;asjd as ;asjsd;asjd;ja</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
try this one:
<table style="border:1px solid">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>