I want to override the background of a table cell with a CSS definition, using class:
<table class="adminTable">
<thead>
<tr>
<th>Title</th>
<th align="center" width="50">%</th>
<th align="center">Actions</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>Test</td>
<td align="center" class="IN_PROGRESS">27%</td>
<td align="center" width="175">
<a class="rounded-button" href="/admin/workflows/1/summary">Show</a>
<a class="rounded-button" href="/workflows/delete?id=1" class="button">Delete</a>
</td>
</tr>
</tbody>
</table>
The 'IN_PROGRESS' value varies with the different rows, and provides a colour indicating the status.
This is in my CSS style sheet:
.adminTable {
width: 100%;
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: WhiteSmoke ;
}
.adminTable th {
border-width: 1px;
padding: 5px;
border-style: dotted;
border-color: gray;
background-color: white;
-moz-border-radius: 10px;
}
.adminTable td {
border-width: 1px;
padding: 5px;
border-style: dotted;
border-color: gray;
background-color: white;
-moz-border-radius: 10px;
}
.IN_PROGRESS{
color:#FFFFFF;
background: DarkOrange;
}
Most of the time I just want the white background (and use this style all over my application), but here, and another few places I need to colour it. Is there an easy way to do this without having to duplicate the styles?
The problem is that .adminTable td is more specific (score {0}{1}{1}) than .IN_PROGRESS (score {0}{1}{0}).
Try td.IN_PROGRESS (score {0}{1}{1} but because it appears later in the CSS file it will win out) instead.
You should give complete css hierarchy for .IN_PROGRESS.
It will go as follows
.adminTable td.IN_PROGRESS {
color:#FFFFFF;
background: DarkOrange;
}
Related
I have a few tables on my site, mostly without borders. But I want to draw borders on some. I am using class for the latter in my CSS:
table {
padding: 2px;
border-collapse: collapse;
table-layout: auto;
text-align: center;
display: block;
}
table.tableAllBorder tr td{
border-right: solid 1px;
border-left: solid 1px;
border-top: solid 1px;
border-bottom: solid 1px;
}
This works fine. But CSS fails if I include 'th' in the definition, as follows:
table.tableAllBorder tr td th{
border-right: solid 1px;
border-left: solid 1px;
border-top: solid 1px;
border-bottom: solid 1px;
}
Ideally I would like to just include border="1" when I define my table. In that case I see a double border, far outside my table (please see attached screenshot). Please advice.
<table border="1">
</table>
Edit:
My css:
html, body {
background-color: rgb(var(--color5));
font-family: sans-serif;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
.div1
{
margin-left: 40px;
overflow-x:auto;
width:auto;
}
table {
padding: 2px;
border-collapse: collapse;
table-layout: auto;
text-align: center;
display: block;
}
table tr:nth-child(odd) {
background-color: rgb(var(--color4));
}
table tr:nth-child(even) {
background-color: rgb(var(--color5));
}
table.tableAllBorder tr td th{
border-right: solid 1px rgb(var(--color1));
border-left: solid 1px rgb(var(--color1));
border-top: solid 1px rgb(var(--color1));
border-bottom: solid 1px rgb(var(--color1));
}
and my html code:
<div class="div1">
<table border="1" class="center">
<tr>
<th> ColA </th>
<th> ColB </th>
<th> ColC </th>
<th> ColD </th>
<th> ColE </th>
<th> ColF </th>
<th> ColG </th>
<th> ColH </th>
</tr>
</table>
</div>
Don't use border=1. Such markup is outdated and isn't semantic HTML. Use a class with border: 1px solid black.
If you include th in your CSS, your are selecting only the th element. You need to make a separate class.
table.tableAllBorder tr td {
/* your original stuff */
}
table.tableAllBorder tr th { /* new selector */ }
We don't see your markup, but that's assuming you have the following legal HTML:
<table class="tableAllBorder">
<tr>
<th>Header</th>
...
</tr>
<tr>
<td></td>
...
</tr>
<tr>
<td></td>
...
</tr>
</table>
I have a strange formatting issue. I have an MVC application that uses Bootstrap 4. When I specify the width of the table using a style="width:xx%" attribute on the declaration, the background color of the caption row only extends across part of the table. If I don't specify the width, the background color works perfectly. I've attached a snip that displays an example of a table using auto width, and a table where I've set the width to 70%.
The container is "container-fluid body-content input-group-sm". The _layout.cshtml includes the following style tags, though I'm only referencing the "table mytable" style in this example, as you'll see in the View source below.
body {
padding-top: 5px;
margin-left: 10px;
font-size: 14px;
}
tr {
line-height: 10px;
min-height: 10px;
height: 10px;
/*padding: 0 !important;*/
}
td {
padding: 5px;
}
.table th,
.table td {
padding: 5px 8px;
}
.mytable>tbody>tr>td,
.mytable>tbody>tr>th,
.mytable>tfoot>tr>td,
.mytable>tfoot>tr>th,
.mytable>thead>tr>td,
.mytable>thead>tr>th {
padding: 4px;
}
.mytable {
margin-bottom: 2px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
border-color: rgb(204, 204, 204);
display: inline-block;
margin-right: 2px;
width: auto;
margin-left: 15px;
}
.mytable caption {
caption-side: top;
background-color: #f5f5f5;
color: #333;
padding: 10px 15px;
font-size: 16px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-color: rgb( 204, 204, 204);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div style="white-space:nowrap">
<h4>Test Page</h4>
<table class="table mytable">
<caption>My Caption - Table 1</caption>
<tr>
<th style="width:30%">Heading 1:</th>
<td>
Row 1
</td>
</tr>
<tr>
<th>Heading 2:</th>
<td>
Row 2
</td>
</tr>
</table>
<br />
<br />
<table class="table mytable" style="width:70%">
<caption>My Caption - Table 2</caption>
<tr>
<th style="width:30%">Heading 3:</th>
<td>
Row 3
</td>
</tr>
<tr>
<th>Heading 4:</th>
<td>
Row 4
</td>
</tr>
</table>
</div>
I'm absolutely no expert on style sheets, so if this is a newbie level question, I apologize. I've done quite a bit of googling to try and understand this, but have come up empty. Any hints on why this is happening, and suggestions on how to correct it would be most appreciated. Thanks!
Remove display: inline-block from .mytable class.
body {
padding-top: 5px;
margin-left: 10px;
font-size: 14px;
}
tr {
line-height: 10px;
min-height: 10px;
height: 10px;
/*padding: 0 !important;*/
}
td {
padding: 5px;
}
.table th,
.table td {
padding: 5px 8px;
}
.mytable>tbody>tr>td,
.mytable>tbody>tr>th,
.mytable>tfoot>tr>td,
.mytable>tfoot>tr>th,
.mytable>thead>tr>td,
.mytable>thead>tr>th {
padding: 4px;
}
.mytable {
margin-bottom: 2px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
border-color: rgb(204, 204, 204);
margin-right: 2px;
width: auto;
margin-left: 15px;
}
.mytable caption {
caption-side: top;
background-color: #f5f5f5;
color: #333;
padding: 10px 15px;
font-size: 16px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-color: rgb( 204, 204, 204);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div style="white-space:nowrap">
<h4>Test Page</h4>
<table class="table mytable">
<caption>My Caption - Table 1</caption>
<tr>
<th style="width:30%">Heading 1:</th>
<td>
Row 1
</td>
</tr>
<tr>
<th>Heading 2:</th>
<td>
Row 2
</td>
</tr>
</table>
<br />
<br />
<table class="table mytable" style="width:70%">
<caption>My Caption - Table 2</caption>
<tr>
<th style="width:30%">Heading 3:</th>
<td>
Row 3
</td>
</tr>
<tr>
<th>Heading 4:</th>
<td>
Row 4
</td>
</tr>
</table>
</div>
It's ok ...:
but:
Why it? I'm developing a web site, and it's a trouble, a really trouble.
The code:
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
Why it?
It looks like you are more zoomed in on the 1st table than in the 2nd. You can try zooming in on the second, and the bordering should reappear.
I read trough a lot of the posts here but those solutions don't seem to work for me.
I have a problem with the row because it should fit the image without those white spacings ont top:
#popuptable table, th, td, tr
table.popuptable {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: #2778AF !important;
border-collapse: collapse;
background-color: white;
}
table.popuptable th {
margin-left: 20px !important;
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable td {
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable tr {
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
Where is my problem? I tried all combinations of height I could think of..
Update Html for the popup:
<div id="hidden-BE" style="display:none;" class="popuptable">
<table border="0" width="400">
<tbody><tr>
<th colspan="2"> Kanton BE </th>
</tr>
<tr>
<td width="125px"><img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125"></td>
<td valign="top">
<b>Auswahl (Total: 4)</b><br>
<ul>
<li>Laur, Ernst Ferdinand (1871-1964)</li>
<li>Landis, Jakob (1926-)</li>
<li>Lampert, Octave</li>
<li>Laur-Schaffner, Sophie (1875-1960)</li>
</ul>
</td>
</tr>
</tbody></table>
</div>
Here is one way of adjusting the layout to get a good image fit.
For the HTML, add valign="top" to the table cell holding the image:
<table border="0" width="400" class="popuptable">
<tbody>
<tr>
<th colspan="2">Kanton BE</th>
</tr>
<tr>
<td width="125px" valign="top">
<img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125">
</td>
<td valign="top">
<b>Auswahl (Total: 4)</b>
<br>
<ul>
<li>Laur, Ernst Ferdinand (1871-1964)</li>
<li>Landis, Jakob (1926-)</li>
<li>Lampert, Octave</li>
<li>Laur-Schaffner, Sophie (1875-1960)</li>
</ul>
</td>
</tr>
</tbody>
</table>
For the CSS, make the following modifications:
table.popuptable td {
border-width: 1px;
padding: 0px; /* adds spacing above image, so remove... */
border-style: solid;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable img {
display: block;
}
table.popuptable ul {
border: 1px dashed red;
margin: 0 ;
}
Use display: block on the img to get rid of the extra space below the baseline that gets inserted with inline elements.
You also have 2px padding in the table cells, which you may want to remove or keep as needed.
Finally, the default margins on the ul may cause the height of the text block to be higher than the image, so adjust those as necessary.
See fiddle: http://jsfiddle.net/audetwebdesign/HqQWY/
use the set of properties to make the image fit
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Ditch the tables, do the pop-up with divs, set the image as background image for the div:
<div class="flag"></div>
And set background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp
The mouseover function is not working with Google Chrome. Working fine with Firefox and IE. While mouseover the border bottom is not disappearing. But if removing border-collapse: collapse it's working fine. Why is this? Any solution.
css:
html, body{
margin: 0;
padding: 0;
}
.table {
border-collapse: collapse;
}
.border {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border1 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border2 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
padding: 1px;
}
Table:
<table width="1024" border="0" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
</tr>
</table>
Do it like this: put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.border1
{
border:1px solid #000000;
border-left:1px solid transparent;
border-right:1px solid transparent;
background-color: #FFFFFF;
}
.border1:hover
{
border:1px solid transparent;
border-top:1px solid #000000;
padding:1px;
background-color: #deecf9;
}
Your HTML should be something like:
<table width="1024" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
</tr>
</table>
No need to work with the mouseovers as an attribute, just use css.
Edit: i've noticed that you're using the css border-collapse property. This sets whether the table borders are collapsed into a single border or detached as in standard HTML. Try removing this line or set it to "separate", maybe this will work.