I have CSS items for all my table elements (<table>, <tr>, etc...) but I have one table for which I don't want the CSS to apply.
What is the quickest way to have this table just display as a raw HTML table and not apply my CSS formatting.
Also, in my CSS file, I have this:
table td
{
padding: 5px;
border: solid 1px #e8eef4;
}
table th
{
padding: 6px 5px;
text-align: left;
background-color: #FFFFFF;
border: solid 1px #e8eef4;
}
what if I want to have multiple table formats, how do I do this?
You should use classes to define several different styles, e.g:
// global table styles - will be applied to all tables
table td
{
background-color: green;
}
// styles for tables with class "style1"
table.style1 td
{
border: solid 1px red;
}
table.style1 th
{
...
}
// styles for tables with class "style2"
table.style2 td
{
border: solid 1px blue;
background-color: white;
}
Then set the class attribute on the tables where you want to apply that style:
<table class="style1"><tr><td> red border, green background </td></tr></table>
<table class="style2"><tr><td> blue border, white background </td></tr></table>
<table><tr><td> default border, green background </table>
Here style1 is applied to TDs of the first table, style2 to TDs of the second table.
Note that global styles (without any class name) apply to all matching elements (e.g. TDs), but these styles can be overridden by specific styles (as shown with the background-color, which is globally set to green, but overridden for style2).
BTW: for a tutorial about CSS, have a look at http://w3schools.com/css/.
Use a class for the table you want formatted. For example
<table class="myformat">
....
</table>
Now on the css side make sure you define the correct formatting as follows:
table.myformat th {
color: red;
}
table.myformat td {
color: green;
}
The tables that have the class="myformat" property will have the formatting. The ones that not will not. With this approach you can further make various table formats as different classes and apply them to your different tables.
Related
Table border isn't supported in HTML5, but CSS will apply changes to all of my tables, instead of just 1, is there a way around?
I want to make one table to have borders but the "table border" option is not supported in HTML5, what should I do?
CSS will make changes to all of my tables, instead of just one... is there a way around it? :)
For the border, I think you can do :
table {
border: 1px solid black;
}
/* or, for each cell of your table */
td {
border: 1px solid black;
}
If you want to add this style to only one table, then just add a class to this table, and instead in the css something like :
.your-class {
border: 1px solid black;
}
Hope I could help,
I am trying to format via css a paricular table as it shows in the below picture:
As I am new to css I am having problems with specifying:
Borders: As you can see I want to have different border colors and weights for vertical and horizontal borders; for row names and column name
Gap after the 13th column: One solution would possibly be to create a second table and place them next to each other but i wouldn't like to go for that solution
Conditional Formating: Could I do that using css or I have to go the jQuery solution
Its pretty simple actually.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
}
table td {
border: 1px solid #000;
}
table th {
border: 2px solid #000;
}
table tr th:nth-child(4),
table tr td:nth-child(4) {
border: none;
width: 20px;
}
Conditional formatting should be handled by JS, or if the data is populated from a database, do it on the server side and use classnames on the columns.
See jsfiddle: http://jsfiddle.net/b579hy76/
Be aware that with nth-child(x) you have to add an extra empty column after the 13hn column to archieve this effect.
I'm using the bordered table class to style a table.
However, for some of the rows, I need to change the left-border of a table cell yet retain the appearance of a border around the whole table.
To do this, I have tried to re-style the table cell left-border and add a left-border to the table row.
I can remove the table cell left-border, however the new table row left-border is invisible.
.table tr.topic_row {
border-left: 3px solid red;
}
.table td.topic_title {
border-left: none;
}
You can see that the table-row border-appears to be invisible: http://i.stack.imgur.com/M5lsO.png
And yet it should be there: http://i.stack.imgur.com/crMQA.png
Any advice on how i can get the table row border to be visible would be greatly appreciated :)
Edit for clarification:
The issue here is, why isn't the table row border showing. Even though it should be there it isn't.
Try this:
.table tr.topic_row td {
border-left: 3px solid red;
}
.table td.topic_title {
border-left: none;
}
Try applying the border color to the first table cell in the row rather than the table row itself:
.topic_row td:first-child {
border-left: 3px solid red;
}
What is the best way to add a border to an html table when I already have a rule in the css
*{border:0;}
If I add style="border:1px;" into the table then I just get a border surrounding the entire table instead of for each cell as well which is what I should have when I use:
<table border="1" cellspacing="0" cellpadding="0">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
Example
You shouldn't use that HTML as it is not valid. use the following CSS:
table {
border: 1px;
border-collapse: collapse;
}
table td, table th {
border: 1px;
padding: 0px;
}
border-collapse on collapse makes the borders of the cells single. That is the equivalent of HTML cellspacing. Make sure you set the border on the table as well as the td and th.
You also need to set borders on cells. Perhaps you should set up a CSS class for this table.
table.bordered
{
border-collapse:collapse;
}
table.bordered > td
{
border: 1px solid black;
}
Then you would use <table class="bordered">
edit: The other answers assume you want this for ALL tables. I see no reason to jump to that conclusion.
css newbie question -
we have a generalized css defined for Table along with its Table Cells as:
.table {
width: 100%;
margin: 1em 0 1em 0;
border-top: 1px solid #A3C0E8;
border-left: 1px solid #A3C0E8;
}
.table td, .table th {
padding: .6em;
border-right: 1px solid #A3C0E8;
border-bottom: 1px solid #A3C0E8;
vertical-align: middle;
background:#D7E8FF;
color:#333;
}
In one scenerio, I want to override td style so that I can show an icon image in front of Table Cell text.
so, if Table Cell is defined as - <td> Vehicle Name & Details </td>
I want to apply style for this Table Cell so that it also show icon image in front of text - 'Vehicle Name & Details'.
I added this style in css file -
.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }
and added to td as <td class="vehicle"> Vehicle Name & Details </td>
but no icon is being shown. Parent table of this td is <table class="table">
Am I missing something?
Thank you!
.vehicle (one class selector) is less specific than .table td (one class selector + one type selector).
You need either:
a more specific selector (e.g. .table td.vehicle)
an equally specific selector (e.g. td.vehicle) in a rule-set that appears later in the stylesheet
Change your selector to td.vehicle also make sure it appears after .table td selector in your css file.
You can also make the special td's style inline:
<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>
Double check to make sure your URL location is correct. I would first put in an absolute path (http://site.com/mainFolder...) first, then change it to a relative path.
try replacing the background position to
background:url(mainFolder/img/icons/vehicle.png) no-repeat left top;
You can also change the no-repeat to repeat for debuging purposes to see if the image loads.
Also i advice u install firebug (if you are using firefox) so you can manipulate html and css on the fly.
It should work, make sure that the route to the image is correct. And also note that is a background image you are setting, so if you don't want the image to be behind the text you have to use padding --> jsfiddle