This is probably a very basic question but I cant figure it out with standard approach. I have a table in which I am trying to do a different styling for one column. I thought that the easiest way to do this would use a class="class" property inside this column and then apply styling on it but it doesnt work.
This is exmaple of my table (its filled with JSON objects but its not important now):
<table id="logtable" class="pretty">
<thead>
<tr>
<th>Time</th>
<th>From</th>
<th>To</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<c:forEach var="message" items="${messages}">
<tr>
<td><c:out value="${message.timestamp}" /></td>
<td><c:out value="${message.sender}" /></td>
<td><c:out value="${message.receiver}" /></td>
<td class="message"><c:out value="${message.payload}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
This is the CSS I use (part of it):
table.pretty tbody td {
text-align: center;
background: #DEE7EF;
}
This works but when I try to style the last column like this, it doesnt do anything:
table.pretty tbody td .message {
text-align: left;
}
What am I doing wrong? Thanks for any tips!
You just need:
table.pretty tbody .message {
text-align: left;
}
(skip the td).
This is because .message means basically "any element with the class message".
On the other hand, td .message means "any element with the class message inside any td element.
You have space betweeb td and message,
replace
table.pretty tbody td .message {
with
table.pretty tbody td.message {
td .message this css selector means you are selecting .message which parent is td.
while td.message means td having message class.
Have you tried the following?
table.pretty tbody td.message {
text-align: left;
}
I believe the td .message is trying to find a child to the td-element with a class of "message".
Example: http://jsfiddle.net/Sb2w4/
Related
<tr>
<td>abc <span>123</span></td>
<td>another td</td>
<td>another td</td>
</tr>
Why my above code the span of the first td doesn't generate properly?
I want to have the result like this
=============================================
abc = another td = another td =
123
=============================================
Use css display property to archive this,
view this jsFiddle
CSS
td{
vertical-align: top;
}
td span {
display:block;
}
HTML
<table>
<tr>
<td>abc <span>123</span></td>
<td>another td</td>
<td>another td</td>
</tr>
</table>
Using a span tag does not deliver a result like you want. You need to have CSS rule for that.
add the following CSS to your page,
td {
width: 100px;
}
td span {
word-wrap: break-word;
display: block;
}
This sets a width for elements and the span is used to break the text line and move it to the next line.
I would like to create a table header row that includes a title on the left as well as "Sample header" on the right. For accessibility and to be semantically correct, the title should probably be in a <caption> tag, but "Sample header" isn't part of the title so it probably shouldn't be inside of <caption>. The caption can't be inside the row since it has to be the first element after <table>.
Here is the HTML structure:
<table>
<caption>Caption</caption>
<thead>
<tr class="sample">
<th colspan="2">Sample header</th>
</tr>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
The caption ends up as a separate line above the table, while I would like it to be on the same line as "Sample header".
Here is a sample of what I'm trying to achieve: http://jsfiddle.net/vueLL5ce/5/. It sets 'caption`'s position to relative and manually moves it where I want. The two main problems with this approach is that repositioning the caption still leaves its original space above the table and I'm working with pixels which vary between browsers so it won't necessarily line up correctly.
Is there a good way of achieving this? Am I stuck with including the header info inside of <caption> (and styling to look like a table row) or creating a regular table row and not using <caption>?
Move background color from div to table and it should remove the color from the top for you. see attached fiddle here
table {
border: solid 1px Black;
width: 100%;
background-color: #FFFFDD;
}
I would remove the caption, use the column head and separate the two items with there own class then align them in your css. Updated the example here This way you don't have the spacing issue at all.
I think I found a cross-browser solution. The key is to set line-height: 0 (plain 0 doesn't work in IE6, but I don't need to support it). Firefox also wouldn't let me reposition the caption directly, so I had to add another span. I still don't like dealing with pixels directly, so any suggestions on that end would be great.
Fiddle: http://jsfiddle.net/vueLL5ce/8/
HTML:
<div>
<table>
<caption><span>Caption</span></caption>
<thead>
<tr class="captionRow">
<th colspan="2">Sample header</th>
</tr>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
background-color: #FFFFDD;
}
table {
border: solid 1px Black;
width: 100%;
}
table caption {
line-height: 0;
text-align: left;
}
table caption span {
position: relative;
left: 4px;
top: 14px;
}
table th {
background-color: #CCC;
}
.captionRow th {
text-align: right;
}
I have been tasked with switching out the TD elements for TH's on all the headers without any change in appearance. Currently the only styling on the TD is:
td.detailColHeader {
background-color:#d5d5d5;
color:#000;
font-weight:bold;
}
When I apply that to the th, it doesn't look the same. Anyone know what needs to be added to make the TH look like the TD?
The TH and TD elements are used for table cells. TH is used for table
header cells while TD is used for table data cells. This distinction
gives user agents a means to render such cells distinctly, for
instance by using a larger or heavier font for header cells. It is
also needed when rendering to speech. The CLASS attribute can be used
to further differentiate cells, for instance into heads and subheads.
This can be used together with style sheets to control the cell border
style, and fill color etc.
Practically the only change you have to do is:
td {
font-weight: bold;
}
td {
font-weight: bold;
}
<table>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</table>
After #Alohci you can also add:
th {
text-align: left;
}
when table has fixed width.
td {
font-weight: bold;
}
table{
width: 200px;
}
th{
text-align: left;
}
<table>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</table>
I have a table nested inside another table. I want to give the outer table cells a border but not the inner table cells. All proper css and html comments aside, how can I style the outer cells but not the inner cells?
css
#table1 td
{
border: solid 1px black;
padding: 5px;
}
html
<table id="table1">
<tr>
<td>Outer table</td>
<td><table>
<tr>
<td>Inner table</td>
<td></td>
</tr>
</table></td>
</tr>
</table>
http://jsfiddle.net/kbVH2/
EDIT
This is the desired effect, #table2 http://jsfiddle.net/kbVH2/4/
I could do the following, but I was trying to keep it all in the css.
<table id="table2" border="1">
<tr>
<td>Outer table</td>
<td><table>
<tr>
<td>Inner table</td>
<td></td>
</tr>
</table></td>
</tr>
</table>
This is how I would do it:
#table1 td {
border: solid 1px black;
}
#table1 table td {
border: none;
}
Live demo: http://jsfiddle.net/kbVH2/3/
You might try using the child selector (>) like this:
#table1 > tbody > tr > td
jsFiddle Demo
Please note that in the demo I also added the tbody element. Some browsers will add it automatically if you omit it (like my Chrome), others might not, so for consistency, I normally add it to make sure it is not breaking my selectors.
I would not say this is your best choice in every situation, but a possible alternative.
Note: Internet Explorer 6 does not support the child selector. See Quirksmode CSS 2.1 Selectors Compatibility Table.
#table1 td
{
border: solid 1px black;
padding: 5px;
}
#table1 td table td
{
/*NORMAL INSIDE TABLE CSS HERE*/
}
put what ever you want the inside table to do inside the second selector. The inside table automatically inherits the outer ones css, but you can override it
Did you try giving them different class IDs and drive the CSS from those classes?
#table1 tr td{
//The table 1 css
}
#table1 tr td table tr td
{
//The second table
}
This should be exact to the second table!
I'm trying to style some specific parts of a 5x4 table that I create. It should be like this:
Every even numbered row and every odd numbered row should get a different color.
Text in the second, third, and fourth columns should be centered.
I have this table:
<table>
<caption>Some caption</caption>
<colgroup>
<col>
<col class="value">
<col class="value">
<col class="value">
</colgroup>
<thead>
<tr>
<th id="year">Year</th>
<th>1999</th>
<th>2000</th>
<th>2001</th>
</tr>
</thead>
<tbody>
<tr class="oddLine">
<td>Berlin</td>
<td>3,3</td>
<td>1,9</td>
<td>2,3</td>
</tr>
<tr class="evenLine">
<td>Hamburg</td>
<td>1,5</td>
<td>1,3</td>
<td>2,0</td>
</tr>
<tr class="oddLine">
<td>München</td>
<td>0,6</td>
<td>1,1</td>
<td>1,0</td>
</tr>
<tr class="evenLine">
<td>Frankfurt</td>
<td>1,3</td>
<td>1,6</td>
<td>1,9</td>
</tr>
</tbody>
<tfoot>
<tr class="oddLine">
<td>Total</td>
<td>6,7</td>
<td>5,9</td>
<td>7,2</td>
</tr>
</tfoot>
</table>
And I have this CSS file:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 0px 5px;
}
#year {
text-align: left;
}
.oddLine {
background-color: #DDDDDD;
}
.evenLine {
background-color: #BBBBBB;
}
.value {
text-align: center;
}
And this doesn't work. The text in the columns are not centered. What is the problem here? And is there a way to solve it (other than changing the class of all the cells that I want centered)?
P.S.: I think there's some interference with .evenLine and .oddLine classes. Because when I put "background: black" in the class "value", it changes the background color of the columns in the first row. The thing is, if I delete those two classes, text-align still doesn't work, but background attribute works perfectly. Argh...
Use CSS pseudo classes.
tr:nth-child(even){
background: #EEEEEE;
}
tr:nth-child(odd) {
background: #FFFFFF;
}
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
text-align: center;
}
I actually found out about the even and odd options for this like a couple hours ago. Hope you'll be as happy to use them as I was :D
Edit: Fixed the last line from tr to td and here's a fiddle
To answer why your code isn't working, W3schools has the answer.
"Note: Firefox, Chrome, and Safari only support the span and width attributes of the colgroup element.
Add the style attribute to the tag, and let CSS take care of backgrounds, width and borders. These are the ONLY CSS properties that work with the tag."
So text-align has no effect. Colgroup is just too old. You gotta get with the times man :P