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;
}
Related
I have the following CSS and HTML
.comTable {
width: 95%;
cellpadding: 2px;
margin: auto;
border-collapse: collapse;
}
.comTable td {
text-align: left;
}
.comTable td:first-child {
text-align: right;
width: 25%;
}
<table id="tableMain" class="comTable">
<tr>
<td>
Some texts 1
</td>
<td>
<table id="table2">
<tr>
<td>
Some more texts
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some texts 2
</td>
<td>
<table id="table3">
<tr>
<td>
Some more texts...
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
The problem is that the comTable CSS class is applied to table2 and table3, such that the first column of table2 and table3 are also set to 25%. How can I make it so that .comTable td:first-child will only apply to tableMain? Please note that I have quite too many rows in tableMain so as much as possible I don't want to apply a class to each first td there.
You can do
.comTable > tr > td:first-child {
text-align: right;
width: 25%;
}
to achieve the desired effect.
> means that only first level children will be affected, and not children deep within.
Use > instead of : e.g. .comTable > tr > td or .comTable > * > td.
To add to Solomon's answer:
you can stack > (child selector) with * (selector for all elements). This way it's possible to grab td from tbody and thead.
.comTable > * > * > td
where html looks like
<table id="tableMain" class="comTable">
<tbody>
<tr>
<td> ...
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
Want to show table contents(text / hyperlink/ div contents) horizontal in safari browser but dont know how to fix it as in google chrome table contents are absolutely showing fine as horizontal
enter code here
<div class="itemFields">
<table>
<tbody><tr>
<td class="label" dir="ltr">Call Number</td>
<td><div>PS169.F7 H3 1961</div></td>
</tr><tr>
<td class="label" dir="ltr">Publisher</td>
<td><div><span dir="ltr">F. Ungar Pub. Co.</span></div></td>
</tr><tr>
<td class="label" dir="ltr">Year</td>
<td><div><span dir="ltr">1961</span></div></td>
</tr>
</tbody></table>
</div>
div.itemFields {
margin: 0;
margin-right: 15em;
}
.itemFields table tr td {
vertical-align: top;
}
.itemFields table tr td {
padding: 0;
}
.itemFields table tr td.label {
padding-right: 1em;
font-weight: bold;
white-space: nowrap;
}
.itemFields table tr td div {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
word-wrap: break-word;
}
.itemFields table tr td div a,
.itemFields table tr td div span {
display: inline;
}
this itemFields class content is showing contents of it vertical in safari browser
Try This Code ! You have to need reset code also better if you use bootstrap............. This code just simple HTML5 Table format & Style. You can change table width 960px & more..........
<div class="itemFields">
<table width="960px" align="center" border="1">
<tbody>
<tr>
<td class="label" dir="ltr">Call Number</td>
<td>
<div>PS169.F7 H3 1961</div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Publisher</td>
<td>
<div><span dir="ltr">F. Ungar Pub. Co.</span></div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Year</td>
<td>
<div><span dir="ltr">1961</span></div>
</td>
</tr>
</tbody>
</table>
</div>
I've been trying to make a colored table with even rows with class item a different color than the odd ones.
Please, see fiddle: http://jsfiddle.net/x7XT5/
HTML:
<table>
<tr class="item">
<td>1</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>2</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>3</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>4</td>
</tr>
<tr>
<td>info</td>
</tr>
</table>
CSS:
table tr.item:nth-child(2n)
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
How to make it work in css?
UPD1
<tr> without class item must be on white background.
<tr class="item">'backgrounds must be red/yellow on even/odd positions.
table tr
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
update: Here you go:
table tr {
background-color: white;
}
table tr.item:nth-child(n)
{
background-color: red;
}
table tr.item:nth-child(4n+1)
{
background-color: yellow;
}
Try this. No need to set the nth child.
http://jsfiddle.net/x7XT5/2/
You could also use odd & eeven keywords.
Hey remove the class and check in your tr and css file
and create easily
Live demo http://jsfiddle.net/x7XT5/1/
and
second method is Live Demo http://jsfiddle.net/x7XT5/3/
Updated Live demo http://jsfiddle.net/x7XT5/5/
First, I think, you should use :nth-of-type instead of :nth-child, but
unfortunately, :nth-of-type doesn't work with classes, so I dont know any pure CSS solution.
You can always use:
table tr.item:nth-of-type(4n+3)
{
background-color: yellow;
}
table tr.item:nth-of-type(4n+1)
{
background-color: red;
}
Works for this example.