<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;
}
Related
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>
I am trying to have my table header be static, but whenever I do this the th and the td widths end up changing. I am doing all of this using CSS. The way that I am making the table header static is by making its position fixed.
I have tried setting the th and td widths to be the same, but that doesn't work.
#idOfHeader th { width: 20px; }
#idOfBody td { width: 20px; }
I dont' see why you'd have to use min-width, max-width or <col>. I think the likely cause of the different widths is either that there is content somewhere forcing a cell to be wider than desired, or the tds and ths have different padding. The total width of a cell is its width plus its padding.
Unless the padding is specified somewhere, the browser's default paddings will be applied and I guess the padding of the th is likely to be bigger than that of the td
th,td{
width:20px;
max-width:20px;
min-width:20px;
}
maybe your padding makes such difference
Use col tag in html
<table border="1" width="100%">
<col width="100">
<col width="50">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
fiddle
How can I stop a td with lots of text making the td above it the same length?
In this example the outline for the cell containing '1' shows its as wide as the cell containing 'long text here'. What I want is for the cell containing '1' to only be as wide as it needs to be to fit the text it contains.
Can this be done with CSS?
http://jsfiddle.net/r7yXD/1/
<table>
<tr>
<td>1</tRund>
<td>2</td>
</tr>
<tr>
<td>long text here</td>
<td>.</td>
</tr>
</table>
td {
border: 1px solid red;
}
So looking at the image below, the first example is what happens and I understand why, but can I make the 2nd option happen instead with CSS?
You can't. Its the nature of a table to make the td's the same width.
You could however add additional td's and use colspan="2", but to be honest, if you need to do such a thing, especially for texts, you probably shouln't be using tables.
Have you tried something like this
<style type="text/css">
td {
border: 1px solid red;
}
</style>
<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">long text here</td>
<td>.</td>
</tr>
</table>
As stated in the comments this is not possible using a <table>-element. You can read more about it here at w3.org: "17.5 Visual layout of table contents".
It says:
The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules.
And interesting for your case is from rule number 5:
[…] Each cell is thus a rectangular box, one or more grid cells wide and high. […]
I have a web app that uses bootstrap to make it mobile friendly.
In an attempt to visually group 3 items together, I have created a class the puts a box / border around the table cell where these three items appear. (the three items are link4, 5 and 5)
Here's the class:
td.lights
{
border: 2px solid black;
}
And here's the problematic HTML - I've paired it down to the minimum code, just for demo purposes.
What I'm noticing is that when I simulate a mobile device (using Firefox's Responsive design view tool) the bottom of the
<table>
<tbody>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td> </td>
<td class="lights">link4 / link5 / link6</td>
</p>
</tbody>
</table>
Immediately after this table, I have this code to create another table:
<P>
<table class="table table-bordered table-striped">
<thead>
etc...
</thead>
</table>
When i resize my browser, the border on the bottom of my in table 1 gets cut off, depending on how small by browser size gets. The other fields look fine, but then again, they don't have a border around them. To me, it looks like there's a fixed set of space above and below my text ("link4 / link5 / link6") that is not dynamically changing.
I've tried adding a height "dynamic" height property to my td like so:
td.lights
{
border: 2px solid black;
height: 1em;
}
But that didn't resolve my problem.
Any suggestions? Please and thanks!
As far as I can tell you have quite a few errors in your markup:
</p>
Should be:
</tr>
Also, should you have a:
<P>
Before your second table? I would avoid wrapping your tables with P tags as this will add unwanted padding and doesn't make sense from a semantic perspective.
Fix those first and see what happens. Secondly I would recommend - when dealing with tables - to use the following:
<table cellpadding="0" cellspacing="0" border="0">
You can also do this in CSS with the following:
table, tr, td { margin: 0; padding: 0; border: 0; }
This should make sure you have no unwanted padding in and around your cells.
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.