I've got a table with CSS styling that has a blank (e.g. white background) first column, and a second column with alternating rows. The problem, however, is that I need to insert another table into the table that doesn't apply the same logic and just acts like a normal table.
Every time I try, it gets over-ridden by the styling and the table within the table also appears white
Any ideas?
HTML:
<table class="ContentTable1" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center; width: 106.5px;">
<p><img src="/knowledgeobject/read?id=149&context=image" data-koid="149" />
</p>
</td>
<td style="width: 1041px;">
<table width="100%">
<tbody>
<tr>
<td style="width: 1%; text-align: center;" width="884">1.</td>
<td width="884">Turn alarm off - If already turned off, check to see if anyone else is in the building</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS
.ContentTable1 td:first-child {
text-align: left;
background-color: #FFFFFF;
}
To target just the first column of the parent table, use the CSS child selector (>):
.ContentTable1 > tbody > tr > td:first-child {
text-align: left;
background-color: #FFFFFF;
}
I want to make sticky table header (always on the top), but i have two problems:
thead doesn't overflow inside container div
thead doesn't scroll (on x axis) with the content
Here is an example (just forked from the other question):
http://jsfiddle.net/quxshkdh/
HTML:
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
CSS:
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
width: 200px;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
width: 100px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
I want to use only css solution without js tricks. Width of columns can be explicitly defined, but height can't.
Can you repair my example and explain how it should work?
EDIT:
I have already checked question:
Fixed header table with horizontal scrollbar and vertical scrollbar on
- this is not solution for me, because first two answers uses JQuery, and the third one suggested by #Anshuman is also js-based (js is just hidden in html tags onscroll= )
Most solutions are using two tables instead of thead, and i want to avoid that - i want to style already rendered html table with thead section.
using your html structure, you can dispatch scrolling bars on the container and tbody. but tbody scrollbar will only be seen if container is scrolled all the way to the right.
Not too sure that is what you look for (width and height used for demo , update these to your needs if that is what you tried to do):
table {
display: block;
width: 75vw;
}
section {
width: 25vw;
overflow: hidden;
position: relative;
overflow-x: auto;
}
thead,
tbody {
display: block;
}
tbody {
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
tr {
display: table;
border-collapse: collapse;
width: 75vw;
table-layout: fixed;
}
th,
td,
th div {
box-shadow: 0 0 0 1px;
}
th div {
position: absolute;
top: 0;
left: auto;
width: 25vw;
background: gray;
}
<section>
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
with the code below I found I'm confused with the definition of :nth-child
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
tr:nth-child(2n) {
background-color: gray;
}
table {
margin-left: 20px;
margin-right: 20px;
border-spacing: 0px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
<table>
<caption>content</caption>
<tr>
<th>table head</th>
</tr>
<tr>
<td>111111</td>
</tr>
<tr>
<td>222222</td>
</tr>
<tr>
<td>333333</td>
</tr>
<tr>
<td>444444</td>
</tr>
<tr>
<td>555555</td>
</tr>
<tr>
<td>666666</td>
</tr>
</table>
and the 111111, 333333, 555555 become gray. nothing changed after I delete the caption tag, but 222222, 4444444, 666666 become gray after I removed the tr tag of table title. Isn't :nth-child suppose to count every element of its parent?
The problem here is that your HTML is invalid. tr elements must be wrapped within either a thead, tbody or tfoot element, and most browsers will automatically fix this for you by sticking them in a tbody.
Your HTML on these browsers will actually end up looking like this:
<table>
<caption>...</caption>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
And thus, deleting the <caption> element will have no impact on the positioning of your tr elements.
If you inspect your <table> element, this is what you'll see:
I am building a table that has truncated headers and content using the :after selector.
I want to be able to move the :after content onto a new line only where the header text is truncated, is there a way of doing this only using CSS?
I am currently using jQuery and window.resize listeners to implement a solution similar to the one found here: HTML - how can I show tooltip ONLY when ellipsis is activated but would prefer to be able to do it without the extra overhead of the jQuery and the listeners
An example of the HTML and CSS is:
<style>
table, th, td {
max-width: 75%;
table-layout: fixed;
border: 1px solid black;
}
th {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
th:after {
content: ":";
}
</style>
</head>
<body>
<table width="600px">
<thead>
<tr>
<th width="5%">I'm a very long table header that is going to get truncated in the browser</th>
<th width="10%">small</th>
<th width="20%">medium</th>
<th width="65%">large</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
<td>Java</td>
<td>01/01/2010</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
<td>C</td>
<td>01/02/2010</td>
</tr>
</tbody>
</table>
</body>
</html>
If you want your :after element content should come on next line then try following code.
th:after {
content: ":";
display:block;
clear:both:
}
having trouble with font-size ; demo: http://jsfiddle.net/9QMky/2/
body{
font-size: 20px;
}
input, div{
height: 10px;
width: 10px;
}
Reading this CSS, I hoped to see the very same dimensions for both input and div in this HTML:
<table>
<tr>
<td>
<input type="button"/>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
But they do not: the td containing the input is greater.
font-size seems to be a part of the problem, using property
display: flex;
on the td seems to work. Why?
Note: have played only on Chrome.