I have a table, where two columns will receive 30% of the space each:
<td style="width: 30%;">
The remaining columns should just equally share the remaining space. How do I accomplish this? Do I just give the remaining columns no widthat all?
Yes, declaring no width would work (see snippet below).
<td> automatically adjusts width evenly unless otherwise declared (e.g. <td style="width: 30%;"></td>)
EDIT
When you put data in the fluid cells, they will adapt to the size of the data inside them. To keep them the same width as each other and wrap the text, you will need to declare a width percentage for the fluid cells.
Since we're already using 60% with the first two cells, we have 40% left. We will need to divide 40 by the number of extra cells to get the percentage value for their width.
Thanks to #Chiller for pointing this out!
table {
height: 500px;
width: 100%;
}
td {
background: red;
/* Edit - divide number of fluid cells by 40
(because we're using 60% with the first two)
in this example the number is just over 13) */
width: 13%; /* the number we calculated */
}
<table>
<tr>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Related
I'm trying to format the debug log of an app as an HTML table. I have two columns: one for time stamps, and one for the text of log entries. The text can easily contain long character sequences. Example:
<table>
<tr>
<td class="ts">12:50:01.683</td>
<td class="txt">[1]: NDIS-WDM_Driver_for_HighSpeed_USB-Ethernet_Adapter_(Microsoft's_Packet_Scheduler)_:\Device\NPF_{7D9F4819-8B81-49FA-B321-5F1ACBD6740D}</td>
</tr>
<tr>
<td class="ts">12:50:01.683</td>
<td class="txt">[2]: Realtek_10/100/1000_Ethernet_NIC_________________________________(Microsoft's_Packet_Scheduler)_:\Device\NPF_{90EF96D0-AC16-41E5-AFFD-1B25D439A0D9}</td>
</tr>
<tr>
<td class="ts">12:50:01.683</td>
<td class="txt">[3]: Realtek_10/100/1000_Ethernet_NIC_________________________________(Microsoft's_Packet_Scheduler)_:\Device\NPF_{D3FA28DC-C59B-4027-AC43-6480B775ACD9}</td>
</tr>
</table>
I would like the table to always use 100% browser width. The width of the time stamp column should adapt to its content, and the text of the second column should wrap automatically. The CSS I tried:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: solid 1px #000;
}
.ts {
width: 100px;
}
.txt {
word-wrap: break-word;
}
In Chrome 26, without table-layout: fixed;, the table is wider than the browser, and a horizontal scroll bar appears. Since this setting makes the width of my columns equal, I had to set the width of the time stamp column to a predefined value: width: 100px;.
The problem is, if the user changes the zoom factor by Ctrl + Mouse Wheel, timestamps can easily become wider than their column, which looks ugly. Is it possible to make the width of the timestamp column follow the width of its content? (I could make it unbreakable with white-space: pre;.) Or, is there another approach which is not based on table-layout: fixed;?
Since 1em is equal to the current font size, it's better to set the width of the time stamp column in em units instead of px. This way the width of the column will be proportional to its content, which solves the zooming problem.
This solution is sub-optimal because the actual width value will depend on the font-family. For example for Times New Roman, the width of the time stamp column can be set to 6em, but a wider font like Courier New requires 8em.
I'm trying to get a table with fixed-width tds and variable-width tds.
Im using the CSS calc() function, but somehow it seems like I can't use % in tables.
So that is what I have so far:
<table border="0" style="width:100%;border-collapse:collapse;">
<tr style="width:100%">
<td style="width:30px;">1</td> <!--Fixed width-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space-->
<td style="width:80px;">Year</td><!--Fixed width-->
<td style="width:180px;">YouTube</td><!--Fixed width-->
</tr>
</table>
How I see it, it should work, but it isn't.
Does anybody know how to solve this? Or maybe has an other suggestion how I could reach my goal?
Tables have difficult rules about distributing the space of the columns because they distribute space dependent on the content of the cells by default. Calc (atm) just wont work with that.
What you can do however is to set the table-layout attribute for the table to force the child td elements to get the exact width you declared. For this to work you also need a width (100% works) on the table.
table{
table-layout:fixed; /* this keeps your columns with at the defined width */
width: 100%; /* a width must be specified */
display: table; /* required for table-layout to be used
(since this is the default value it is normally not necessary;
just included for completeness) */
}
and then use plain percentages on the remaining columns.
td.title, td.interpret{
width:40%;
}
td.album{
width:20%;
}
After using up the space for the fixed width columns, the remaining space is distributed between the columns with relative width.
For this to work you need the default display type display: table (as opposed to say, display: block). This however means you can no longer have a height (including min-height and max-height) for the table.
See your modified Example.
Calc is the general function.
-webkit-calc is for webkit.
Add those in according to the browser you're using.
Regardless, your -calc- function will be ignored. having 3 td's that will be 40% of the remaining width? Thats 120% in total. This is a table. The parent's width will always take precedence.
However, if you have the TD's in in 5%, it the total width will be smaller than that of the table, hence it will also be ignored.
Bottom line: don't use calc with table.
<table>
<tr>
<td>One</td>
<td>Two</td>
<td class="skinny">$$</td>
<td>Four</td>
</tr>
</table>
I'm trying to make all of the tds the same width, except for the one with class 'skinny'. I can't seem to change just the skinny one though.
http://jsfiddle.net/tZHgV/
I'm trying to make the table look like this:
| One | Two |$$| Four |
where one, two, and four are the same width. How can I change just one class of tds' width?
Change your CSS to this
.skinny {
width: 5px;
min-width: 5px;
}
I have a row <tr> that has a few columns <td> in it. I have a background image set to the <tr> but it restarts the background image for each <td> as if it were individually set for each <td>. I would like the one image to span across the background for all the columns in that row.
Is there a way to do that?
here is my code:
<tr bgcolor="#993333" style="color:#ffffff; background:url(images/customer_orders/bar.gif) no-repeat;">
<td><strong>Product(s)</strong></td>
<td width="7%"><div align="center"><strong>Qty</strong></div></td>
<td width="11%"><div align="center"><strong>Total</strong></div></td>
</tr>
Thanks!!
It won't change anything if you replace background-repeat property with 'repeat'.
The fact is TR does not support backgrounds and you must do it different way.
If you can use divs - go for it. If you must use table, move your header to seperate table and apply background to this new header-table. This is not perfectly correct but will do the job. If I was you I would use bar.gif graphic that I can repeat-x across all header tds.
<table style="background:#993333 url('images/customer_orders/bar.gif'); color:#fff;">
<tr>
<th>Product(s)</th>
<th>Qty</th>
<th>Total</th>
</tr>
</table>
<table>
<tr>
<td>data1</td>
<td>tdata2</td>
<td>data3</td>
</tr>
</table>
You will probably have to set the background position separately on each <td>. <tr>s don't support most css properties.
For example, in the simple case where left and right columns are equal widths:
tr td{ background-position: center; }
tr td:first-child { background-position: left; }
tr td:last-child { background-position: right; }
This obviously gets much more complex when you the widths are different, and in your case with % widths, you would probably have to do some javascript to get the actual location of the middle column.
<td>
<div id="test">...</div>
</td>
<td>
.....
</td>
I can see from firebug that td is about 40px wider than the "test" div(width+border+margin all included),but there is no css style that do this(no setting of width,padding)!
Why is the "td" not as wide as div here?
I'm now hardcoding the td to9 be as wide as "test" div,but feel uncomfortable.
Without the rest of your code, I'm going out on a limb here, but the <td> will auto size based on the table width / number of columns in the table. If your table does not have an explicit width assigned, then it will expand to 100% width of its container or parent element. You can feel comfortable avoiding this by setting explicit width on the table, or table cells as needed.
In the following scenario, each column will autosize to tablewidth / number of columns or in this case 400 / 4 = 100. So each column will be 100px wide.
<table style="width:400px">
<td></td>
<td></td>
<td></td>
<td></td>
</table>
Depending on the browser, there are two possible results in this scenario. 1. The table will expand to be 100% the width of its parent, or 600px here. That means that each column will then auto size to 150px wide. 2. The table and columns may expand to the width of the widest child element in its column group.
<body style="width: 600px"> <!-- Could be a div or other element here -->
<table>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</body>
The WC3 Spec can be found here and provides some great detail on how browsers are supposed to implement the HTML 4.01 spec in regards to tables.