I have seen a few similar questions but they don't match what I am after. I have a situation where a table can have inner tables. However, I like the inner table to ignore the styles defined by "myTable". How can I do this?
Preferably, without adding a CSS for inner table. Or at least without adding a new class or reference to an ID for the inner table. Thank you for any help.
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Deryck has the right answer altough it's not complete because of browser implementation and missing tr
#myTable > tbody > tr > td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > tbody > tr > th {
border: 1px solid #ddd;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
If you are trying to make it so the styles you have there don't apply to anything but the specific children (tr, th, etc at the top level) you can use > to specify the style to only apply to the direct children of #myTable
#myTable > td, #myTable > th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Related
I found out that you can't style thead, tr, or tbody. What I want to do is have a 2px white border between the cells and doesn't over lap and give the table a border radius where the table cells don't break the radius.
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
}
td {
padding : 12px;
border: 2px solid white;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
Is there a way of going about this?
Also I tried to add the reset I was using to the code and everything broke because I don't know how to add it before the css that runs in the code snippet example:
https://meyerweb.com/eric/tools/css/reset/reset.css
Its isn't quite true that you cant style th, tr, td elements in a table. You can see below how the background colour of th & tr is changed.
You can target cells in the corners through pseudo classes such as :first-child, :last-child and add individual border radius property.
In your sample code I've used these properties to mention the borders.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
background: red;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
td {
padding : 12px;
border: 2px solid white;
}
tr:nth-child(even) {
background: grey;
}
tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
Sorry if the title isn't descriptive, I didn't know how to word it. Here's the table in question.
Is it possible for me to remove the white border (the background of the table) from this upper-left cell? I still want this white background between the rest of the cells, but in that upper-left I want it removed. Here's how I want it to look.
My initial thought is to have some ::after pseudo-element on that cell that has some border or padding that can cover that gap between the cell and page background, but I don't know how to do that. Any ideas?
Here's the CSS on this page.
body{
background: #C3DEF2;
font-family: Noto Sans, Roboto, Helvetica, Arial, sans-serif;
}
table{
background: white;
table-layout: fixed;
}
tr:nth-child(even){
background: lightgray;
}
td{
padding: 20px;
}
td.corner{ /* cell in upper-left corner */
background: #C3DEF2;
}
.head1{ /* top row */
text-align: center;
}
.head2{ /* leftmost column */
text-align: right;
}
.head1, .head2{
background: lightblue;
text-transform: uppercase;
font-weight: 600;
}
As requested, here's some of the HTML relating to this part of the table.
<table id="the_table" width="100%">
<tbody>
<tr class="head1">
<td class="corner"></td>
<td>Candidate 1</td>
<td>Candidate 2</td>
</tr>
<tr>
<td class="head2">Education</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Election Reform</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Environment</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Foreign Policy</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Probably more importantly, where does this border come from? It's the white background of the table, but what causes that space between the cells?
Here's a quick solution:
HTML:
<table>
<tr>
<td style="border: 1px inset white;">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
CSS:
table {
margin: 20px;
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 40px;
height: 40px;
border: 1px solid black;
text-align: center;
}
td:hover {
border: 1px solid red;
}
DEMO:
https://liveweave.com/7eIF6k
I've got a table showing participation of countries in a project in 2013 and 2018. For a year in which a country participated, we want to display a black circle. The cell will be empty for a year in which the country didn't participate.
For the sake of accessibility, I was figuring on having "Yes" and "No" in the table, and then using CSS repositioning and the ::before pseudo-element to put the screen reader-readable text off-screen and swap the black circle into place in the Yes cells.
I could tell that the black circle wasn't centered. To emphasize what was going on, I replaced "Yes" with "Affirmative" and replaced "No" with a hollow circle instead of nothing. The display produced by the code below shows that the circles are being displayed at the left of where the words "Affirmative" and "No" would have been if I hadn't displaced them. How can I display the symbols centered in the columns instead?
<!DOCTYPE html>
<html>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
left: -999em;
width: 0;
}
table tbody td .yes::before {
position: relative;
left: 999em;
content: "\0025cf";
}
table tbody td .no {
position: relative;
left: -999em;
width: 0;
}
table tbody td .no::before {
position: relative;
left: 999em;
content: "\0025cb";
}
</style>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
</html>
This gives me:
Without the substitution, I get the following, which shows that the symbols are being positioned at the left edge of where the words would be if I hadn't displaced them.
Can anyone give me any tips? I've tried setting widths of the displaced text to 0 and hiding overflow, to no avail.
The problem with this approach (if you care about accessibility) is that CSS pseudo-elements aren't actually added to the DOM. Most browsers will compensate for this, but Internet Explorer doesn't. There are enough people using IE that this matters. Resizing content to zero pixels height or width will also prevent screen readers from announcing the content.
A better way of approaching this issue would be to load all content into the DOM and then use the aria-hidden attribute on the content you DON'T want screen readers to announce.
Here's a fiddle of a more accessible version of this:
https://jsfiddle.net/2jvL6f0L/
No need to hide span by positioning it to -999em.
See the following solution. Hope this will help. (JSFiddle link)
Here I've just made the span text transparent and positioned :before by calc(). This will always make it aligned in the middle.
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .yes::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cf";
display: block;
color: #000;
width: 20px;
}
table tbody td .no {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .no::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cb";
display: block;
color: #000;
width: 20px;
}
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
Well, I came up with one solution: set display: block; on the ::before. That has a couple of side effects: the table rows are now taller than I'd like, even though I've set padding and margin to 0; and the circles aren't vertically centered, and setting vertical-align: middle; doesn't fix that. I've wound up setting top: 4px; but I'm not thrilled with that approach.
Incorporating ideas from previous responses here, I've now come up with the following replacement for my previous approach.
table tbody td.indicator {
text-align: left; /* not center */
}
...
table tbody td .yes {
position: relative;
left: -999em;
}
table tbody td .yes::before {
position: relative;
left: calc(50% + 998.75em);
content: "\0025cf";
}
Below is one solution that should help.
I moved the Affirmative and No into the title attribute of the <span> and placed the HTML elements for the two kinds of circles as the content of the <span>
This removed the need for the :before in the CSS.
The title helps with Accessibility, but not really since all the screen readers will read is the word "Affirmative" or "No" with no context. It might be better, if you are concerned about screen readers to improve on the title attribute to be something more like: title="Affirmative for Germany in 2013" or something like that.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
</style>
</html>
<body>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col" class="indicator">2013</th>
<th scope="col" class="indicator">2018</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Australia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Bolivia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Croatia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Denmark</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Ethiopia</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">France</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Germany</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Fiddle: http://jsfiddle.net/fr8Kw/
Html:
<!DOCTYPE html>
<html>
<head>
<title>Table Pagination</title>
<style>
body {
font-family: Tahoma;
}
h3 {
background-color: rgb(232, 232, 232);
font-size: 14px;
font-weight: bold;
color: gray;
width: 786px;
height:25px;
margin:2em auto;
padding-top:10px;
padding-left:8px;
margin-bottom: -23px;
border: 1px solid;
border-color: #888888;
}
table {
table-layout: fixed;
font-size: 12px;
width: 810px;
margin: 2em auto ;
}
thead {
background:rgb(232, 232, 232);
color: gray;
height:20px;
}
td {
width: 10em;
height:20px;
word-wrap: break-word;
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/){
text-align: center;
width:30px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(2 /*this is the column number*/) {
width:250px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(3 /*this is the column number*/) {
width:250px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(4 /*this is the column number*/){
width:60px
}
#localFileCopyingDiv #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(5 /*this is the column number*/) {
width:220px
}
tbody {
background:#D8D8D8
}
div.pager {
width: 799px;
text-align: left;
margin: 0 auto;
margin-top: -20px;
}
div.pager span {
display: inline-block;
width: 10px;
height: 10px;
cursor: pointer;
background:rgb(156, 187, 203);
color: #fff;
margin-right: 0.5em;
font-size: 13px;
padding-top: 8px;
padding-left:8px;
padding-bottom: 8px;
padding-right:8px;
}
div.pager span.active {
background: rgb(123, 167, 198);
}
.highlightedRow {
color : red;
}
#fileWritingDiv table tbody {
color : red;
}
</style>
<script type="text/javascript" src="resources/javascripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="localFileCopyingDiv">
<h3>Local File Copying Info:</h3>
<table class="paginated">
<thead>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="supplementaryMaterialsDiv">
<h3>Supplementary Materials:</h3>
<table class="paginated">
<thead>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="assetsDiv">
<h3>Assets:</h3>
<table class="paginated">
<thead>
<tr>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="fileWritingDiv">
<h3>File Writing Status</h3>
<table>
<thead>
<tr>
<td>File Name</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"
src="resources/javascripts/tablePagination.js" /></script>
</body>
</html>
Problem: the following CSS rule is not being applied to any column. Why not?
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/)
{
text-align: center;
width:30px
}
notice in your Assets table you have a TR within a TR..
<table class="paginated">
<thead>
<tr> <----
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</tr> <----
</thead>
<tbody>
remove the stray TR and the 1st col becomes 30px wide.
try like this
.paginated tbody tr td:nth-child(2) {
text-align: center;
width:30px;
}
Firstly apologies with my limited knowledge, I am just starting out in CF.
So I am trying to send out an html email with cfmail when a form query is satisfied.
The problem I am having is that the css I am embedding within the email head is either throwing up errors or just not formatting at all. Please could someone look at my code and tell me where I am going wrong.
Incidentally when I take out the # tags in the css it seems to work but the email sends with no formatting!!!
<cfmail to="customer email" from="xxxxxxx#gmail.com" subject="Your order at has been shipped" type="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
body {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
}
a, a:visited, a b {
color: #378DC1;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
#container {
width: 680px;
}
#logo {
margin-bottom: 20px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
table.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
table.list tbody td a {
text-decoration: underline;
}
table.list tbody td {
vertical-align: top;
padding: 0px 5px;
}
table.list .left {
text-align: left;
padding: 7px;
}
table.list .right {
text-align: right;
padding: 7px;
}
table.list .center {
text-align: center;
padding: 7px;
}
</style>
</head>
<body>
<div id="container">
<p>Your Order has been Shipped</p>
<table class="list">
<thead>
<tr>
<td class="left" colspan="2">text_order_detail;</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left"><b>text_order_id</b><br />
<b>text_date_added</b><br />
<b>text_payment_method</b><br />
<b>text_shipping_method</b>
</td>
<td class="left"><b>text_email</b><br />
<b>text_telephone</b><br />
<b>text_ip<br /></td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_instruction</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">comment</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_payment_address</td>
<td class="left">text_shipping_address</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">payment_address</td>
<td class="left">shipping_address</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_product</td>
<td class="left">text_model</td>
<td class="right">text_quantity</td>
<td class="right">text_price</td>
<td class="right">text_total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">product
<br />
<small>option</small>
</td>
<td class="left">product['model']</td>
<td class="right">product['quantity']</td>
<td class="right">product['price']</td>
<td class="right">product['total']</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="right"><b>total['title']</b></td>
<td class="right">total['text']</td>
</tr>
</tfoot>
</table>
<p>text_footer</p>
<p>text_powered</p>
</div>
</body>
</html>
</cfmail>
</cfif>
Two issues the first is you need to use ## in your CSS instead of #, otherwise ColdFusion tries to process those as variables. The second is you have an erroneous </cfif> at the bottom of your page, but that was probably just from when you copy and pasted your code.
I tested the code with ## instead of # and the email sent correctly on CF 9.0.1
You should stick to inline styles for HTML emails rather than having your styles presented the way you are doing.
E.G.
<td style="padding:10px;"></td>