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;
}
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 have a HTML page which has records displayed using the <TABLE> format. Formatting is controlled from CSS sheet (See below). I have 3 requirements and able to achieve first two, and for last one, need to know how to do it please..
Different header - Completed
Alternate row coloring - completed
fourth column from row #3, should have different background colour - I can get full column background colour changed, but not starting from 3rd row on wards.. any idea how to get this from CSS??
(attached image is what I want to achieve)
table.Event-table {
width:100%;
padding-left: 2px;
border: 1px solid #ddd;
}
/*border and text alignment*/
.Event-table tr td {
text-align:center ;
padding-left:10px;
border: 1px solid #ddd !important;
}
/*Alternte background colour*/
.Event-table tr:nth-child(2n+1) {background: #e7f7ff }
.Event-table tr:nth-child(2n+2) {background: #fff}
/*Header Row*/
.Event-table tr:nth-child(1) {
font-weight : bold;
text-align:center;
color: #000;
background-color : #d9edf7 ;
border : 1px solid #ddd !important;
}
/*Select forth column, but from second row onwards*/
.Event-table td:nth-child(4) {
background-color : #eab6f8;
}
Some thing like this? I took random smaller table from w3schools (edit to set correct column/row index for you).
table tr + tr + tr + tr td:nth-child(2) {
background-color: red;
}
https://jsfiddle.net/2v3ahoeu/
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 doing something like this:
$("#accountsTable")
.append(getHeadersFromJson(json))
.append(getRowsFromJson(json));
$("#accountsTable")
.css("border", "3px solid black");
$("#accountsTable th")
.css("border-bottom", "3px solid black");
$("#accountsTable td")
.css("border-bottom", "1px solid black");
It looks good except I just noticed that the last row has two border-bottom's - one thin for TD and one think for TABLE. I can live with that. However, the perfectionist in me cries a little.
Is there a CSS way to remove the last line style without actually attributing it with a name, id, style etc. during creation?
td:last-child { border: none; }
I think this should do it.
tr:last-of-type td {
border: none;
}
or
$("#accountsTable tr:last-of-type td").css({border:"none"});
Another possible solution is reducing the th border to 2px and then using border-top instead for each td.
Just set the following on your table:
border-collapse: collapse;
You can remove the bottom border from your table:
border-bottom: none
or remove the border for td in the last row:
tr:last-child td{
border-bottom: none;
}
Try the :not selector
https://developer.mozilla.org/en/docs/Web/CSS/:not
td:not(:last-child) {
border: 3px solid black;
}
and if you're worried about browser support, check out http://selectivizr.com/
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.