I have a HTML table that has a fixed width of 1000 px (say), which is much greater than needed to accommodate the text in the table. It looks like:
The "Salary" column has right-aligned text, while the other columns have left-aligned text. (I've added the pink and green backgrounds so that you can see how it's getting laid out. It's not part of the actual table.)
How do I ask it to put equal whitespace between the columns? In other words, in the following screenshot:
I've added two green rectangles to illustrate the whitespace between the columns (more precisely, between the last visible pixel in one column to the first visible pixel in the next). I want these two green rectangles to be of the same width. How do I do that? Is it even possible in HTML?
Keep in mind that the text is dynamic — we don't know ahead of time what text will appear in each column, or how wide it will be.
Here's the code I used:
<table style="width:1000px;">
<tr>
<th style="text-align:left; background-color:#FFFFFF">Name</th>
<th style="text-align:right;">Salary</th>
<th style="text-align:left; background-color:#FFFFFF">Title</th>
</tr>
<tr>
<td style="text-align:left; background-color:#FFFFFF">Kartick</td>
<td style="text-align:right;">10</td>
<td style="text-align:left; background-color:#FFFFFF">Director of Nothing</td>
</tr>
<tr>
<td style="text-align:left; background-color:#FFFFFF">Neha</td>
<td style="text-align:right;">200</td>
<td style="text-align:left; background-color:#FFFFFF">Minister of Awesome</td>
</tr>
<tr>
<td style="text-align:left; background-color:#FFFFFF">Vijay</td>
<td style="text-align:right;">3000</td>
<td style="text-align:left; background-color:#FFFFFF">VP of Buzzwords</td>
</tr>
</table>
PS: Please ignore the use of inline styles. This is throwaway code.
There are two ways of doing this. You can apply a fixed width to the td element, however this requires you to know how many columns there are.
The second way is to apply table-layout: fixed to the table element.
http://codepen.io/alexmccabe/pen/gbzgNQ
To get equal whitespace, you will have to set explicit widths on the first two columns, and padding-left on the last column.
http://codepen.io/alexmccabe/pen/ByxpXb
Try like this: Updated Demo
CSS:
th, td{
width:333px; /* specify in px or % as per your requirement */
}
HTML:
<table> <!-- removed Width from table tag -->
<tr>
<th style="text-align:left; ">Name</th>
<th style="text-align:right;">Salary</th>
<th style="text-align:left;">Title</th>
</tr>
<tr>
<td style="text-align:left; ">Kartick</td>
<td style="text-align:right;">10</td>
<td style="text-align:left; ">Director of Nothing</td>
</tr>
<tr>
<td style="text-align:left; ">Neha</td>
<td style="text-align:right;">200</td>
<td style="text-align:left; ">Minister of Awesome</td>
</tr>
<tr>
<td style="text-align:left; ">Vijay</td>
<td style="text-align:right;">3000</td>
<td style="text-align:left; ">VP of Buzzwords</td>
</tr>
</table>
Related
I want text in all TD below ONE SPECIFIC TH to be BOLD
The table has dynamic columns numbers/positions so I cannot use nth-child()
Example below:
<table>
<thead>
<th id="th_name">Name</th>
<th>Price</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$10</td>
</tr>
</tbody>
</table>
<TD>s below NAME should be BOLD
Is it possible to do this with only CSS not Javascript?
I don't think it's possible in this way to set one column with bold text...
However regarding the title:
CSS: Target the <td> below a specific <th> using #id or .class NOT
nth-child
With the <col> element it is possible to target and style a particular column, but unfortunately only a few properties are available for styling (font-weight isn't one of them)
So it is possible to target and style particular columns, but only in a very limited way.
Here's a demo:
.name {
font-weight: bold;
background-color: orange;
}
.th_name {
background-color: white;
}
<table>
<colgroup>
<col class="name">
<col class="price">
</colgroup>
<thead>
<th class="th_name">Name</th>
<th>Price</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$10</td>
</tr>
<tr>
<td>Orange</td>
<td>$15</td>
</tr>
<tr>
<td>Cherry</td>
<td>$20</td>
</tr>
</tbody>
</table>
From the CSS 2.1 spec:
...Nevertheless, some aspects of cells can be influenced by setting
properties on columns.
The following properties apply to column and column-group elements:
'border'
The various border properties apply to columns only if
'border-collapse' is set to 'collapse' on the table element. In that
case, borders set on columns and column groups are input to the
conflict resolution algorithm that selects the border styles at every
cell edge.
'background'
The background properties set the background for cells in the column,
but only if both the cell and row have transparent backgrounds. See
"Table layers and transparency."
'width'
The 'width' property gives the minimum width for the column.
'visibility'
If the 'visibility' of a column is set to 'collapse', none of the
cells in the column are rendered, and cells that span into other
columns are clipped. In addition, the width of the table is diminished
by the width the column would have taken up. See "Dynamic effects"
below. Other values for 'visibility' have no effect.
There is no parent-child relationship between your th and td and you can't set it with CSS only. You can just add class to each td you need.
.bold{
font-weight: bold;
}
<table>
<thead>
<th id="th_name">Name</th>
<th>Price</th>
</thead>
<tbody>
<tr>
<td class="bold">Apple</td>
<td>$10</td>
</tr>
<tr>
<td class="bold">Banana</td>
<td>$10</td>
</tr>
</tbody>
</table>
Or use :first-child
td:first-child{
font-weight: bold;
}
<table>
<thead>
<th id="th_name">Name</th>
<th>Price</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$10</td>
</tr>
</tbody>
</table>
I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px
I have a table with couple inputs and button on the last row. I want to align them all to the left side. Is it possible to apply float:left to all tr ? also I want it work for IE :)
I have:
<table>
<tbody>
<tr>
<th> </th>
<td> </td>
</tr>
</tbody>
</table>
Does this not work?
<tr>
<td style="text-align:left">html here</td>
</tr>
That should align all elements to the left. If the table looks funny, make sure you don't need to use colspan.
Apply text-align to your desired cells..
To do all cells do this:
td, th {text-align:left}
Yes you can apply it to the entire row. text-align:left would do the trick I think.
<table>
<tbody>
<tr style="float:left">
<th> </th>
<td> </td>
</tr>
</tbody>
</table>
How can I define some general properties for the columns of a table? For example, in the following table I have 2 columns. I want the left column to have a width of 30px and the right column a width of 70px. For the example below I'm writing a CSS class name in every row. Is there a way that I can do it in a more general way? Thanks.
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
</tbody>
</table>
it suffices to define the first TD's... it looks like:
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</tbody>
</table>
And in following, Im writing css class name in every row. Is there a way that I can do it in more general way?
I assume you mean "... in every column". No, if you want cross-browser support, this is currently indeed the only way to do it.
In CSS 3, there is the :nth-child pseudo-class, but it is fully supported only by FF >= 3.5 and Chrome.
Just define classes for td in first row. See example.
Use <th> tags for the first row of the table and then you could have:
th.left {
width: 30px;
}
th.right {
width: 70px;
}
You can use <col> elements to define widths for a column at a time. Something like
<table>
<col class="left">
<col class="right">
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</table>
Note, though, the styles you can set are quite limited -- so far, only width and background-color work for me (in Chrome 9). So if you have anything else set for the class (font sizes, text colors, alignment, etc), you might want to stick to keeping the class on each <td>.
I'm having trouble getting this code to show up correctly in WebKit browsers(chrome/safari). It looks fine in IE6, IE7, and FireFox.
<table width="100%">
<tr>
<td rowspan="2" style="vertical-align:middle;">
<img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/>
</td>
<td style="vertical-align:middle;">
Wishlist
</td>
<td style="vertical-align:middle;">
Link to Us
</td>
<td style="vertical-align:middle;">
Affiliate Program
</td>
<td style="vertical-align:middle;">
Privacy
</td>
<td style="vertical-align:middle;">
Guarantee
</td>
<td rowspan="2" style="width:160px;">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</td>
</tr>
<tr>
<td style="vertical-align:middle;">
About Us
</td>
<td style="vertical-align:middle;">
Shipping
</td>
<td style="vertical-align:middle;">
Why Buy From Us
</td>
<td style="vertical-align:middle;">
Contact Us
</td>
<td style="vertical-align:middle;">
Help
</td>
</tr>
</table>
The problem is that WebKit makes the top row very small and the bottom row fill in the rest of the space instead of each row having an equal height.
Anyone have any ideas of how to make it show up how I want it to in WebKit based browsers?
I have a few recommendations for you but I can't answer your question completely because WebKit seems to render your source fine when I try it.
First, maybe you can change width="100%" to style="width:100%;" Perhaps combined with the other markup, it's putting the browser in quirks mode.
Second, make sure you have the correct doctype on and your code validates or AT LEAST comes close. The doctype I used when copying & pasting your code was XHTML Strict.
Otherwise, please post the source code of the whole page or just link to a live demo. Even a screenshot would help.
I could help more with a live example to test on but you could try adding this to your tr tags.
<tr style="height: 50%;">
Assuming you only need two rows this will bring them to equal height.
a proper example to ensure it is not showing correctly in webkit is the following:
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2" width="15">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td>
this should be big instead
</td>
</tr>
<tr height="20">
<td height="20">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
as you can see the left part is rendered fine, but the right part should be different, as in the top row should populate the left over space and the bottom row is set to 20 height (as you can see neither the tr height nor the td height is taken into consideration by webkit). this renders fine in all other browsers
EDIT:
after playing around and tinkering about my problem, I came to the below solution.
completely relying on jquery reading the height attribute property from the row you want to change:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pipnorowspan").height(function(){
return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2;
});
});
</script>
</head>
<body>
<table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable">
<tbody>
<tr style="border:1px solid #000;">
<td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td id="pipnorowspan" style="border:1px solid #000;">
this should be big instead
</td>
</tr>
<tr height="20" id="piplowerrow" style="border:1px solid #000;">
<td height="20" style="border:1px solid #000;">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
</body>
</html>