I want to have some TDs in a table without border. Here is what I've tried:
CSS
.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
.calendar-table td {
border: 1px solid black;
}
HTML
<table class="calendar-table">
<tr>
<td class="calendar-noBorder"> </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td class="calendar-noBorder"> </td>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
<tr>
<td> aaaaaa</td>
<td> b </td>
<td> c </td>
<td> d </td>
</tr>
</table>
JsFiddle
I want the TDs with noBorderTD class to have no border and the others to have borders. I'd like to avoid to specify a class using "class=" on every bordered TDs.
What's the best way to do it clean ?
Your order of applying styles was wrong. The correct order is:
.calendar-table td {
border: 1px solid black;
}
td.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
Explanation: First specify the borders for all the td, then remove the specific td borders which are not needed.
See the fiddle: "https://jsfiddle.net/bwudg7fn/1/"
instead of:
border:none;
Use -
border:0;
on the TD classes
Try
.calendar-noBorder {
border: none!important;
background-color: red;
}
https://jsfiddle.net/bwudg7fn/2/
Related
I have a table inside another table. My HTML code is like below.
<td>
<table>
<tbody>
<tr>
<td class="remind_when"><label>sfd</label></td>
<td class="remind_when"><label>sdfasdf</label></td>
<td class="remind_when"><label>sadfasf</label></td>
</tr>
</tbody>
</table>
</td>
My CSS code is like below
.remind_when{
border-radius: 5px;
border: 2px solid #ced4da !important;
display: inline-block;
}
table, th, td {
border-collapse: collapse;
}
I am getting output like below
Only elements that display as table-* will collapse their borders. You have made the td elements display: inline-block so they won't.
So don't do that.
I want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
I have this table CSS:
table.show-my-request-table {
border: 1px solid black;
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
tr.show-my-request-table-header{
border: 1px solid black;
}
tr.show-my-request-table{
border: 1px solid black;
}
tr.show-my-request-table:hover{
background-color: #D3D3D3;
}
And table HTML:
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr >
<td class="show-my-request-table"> 11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr >
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>
</table>
I want set up a red background for the first td tag.
My problem is, that I don't know how to do it for only one table.
When I try:
td:first-child {
background-color: #ff0000;
}
it works for all tables.
I think that this code is good, but not working:
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
Why? How can I do this?
Try this:
table.show-my-request-table tr > td:first-child {
background-color: #ff0000;
}
You don't need to use > (immediate children selector) just put a space
Try this:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
This selector tries to target a td that is a direct child of the table element. As your own code shows:
<table class="show-my-request-table center">
<!-- snip -->
<tr >
<td class="show-my-request-table">
There is (and has to be) a tr element between them. But that's not all: the HTML parser will also silently insert a tbody element as a parent for the tr (unless you have explicitly included a <thead> or <tbody> tag). The <tbody> tag is optional in HTML, but the element is not, so the parser will simply add the element if the tag is missing.
The solution is to use the descendant selector:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
A keen observer will notice that the > combinator has been replaced by a (space) combinator.
You just need to target the element inside the table
Try this
table.show-my-request-table tr td:first-child {
background-color: #ff0000;
}
Here's a code pen http://codepen.io/anon/pen/LkrmqK
Cheers and happy coding.
table.show-my-request-table > td:nth-child(1) {
background: #25a3c2;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
See it in action below
table.show-my-request-table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
tr.show-my-request-table-header {
border: 1px solid black;
}
tr.show-my-request-table {
border: 1px solid black;
}
tr.show-my-request-table:hover {
background-color: #D3D3D3;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>
I am trying to make a table with rounded corners AND a single solid border between <tr>'s. However, I seem to have a bit of a problem correctly using border-collapse. When I set border-collapse: separate, I get the following:
Result - border-collapse: separate
Code
HTML
<table>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
CSS
table, tr {
border: 1px solid black;
border-collapse: separate;
border-color: #ACACAC;
border-radius: 5px;
}
However, when I use border-collapse: collapse, I get the correct line between the <tr>'s but the corners are not rounded, as see here:
Result - border-collapse: collapse
Does anyone know how to get both the line between the <tr>'s WITH the rounded corners?
Thanks so much!
Add cellpadding = 0 and cellspacing = 0 at the table element ,remove border-bottom of the tr elments and add this CSS border-bottom for all td elements except last one like:
tr:not(:last-child) td{
border-bottom:1pt solid #ACACAC;
}
table,
tr {
border: 1px solid black;
border-color: #ACACAC;
border-radius: 5px;
}
td {
padding: 5px;
}
tr:not(:last-child) td {
border-bottom: 1pt solid #ACACAC;
}
<table cellspacing=0 cellpadding=0>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
It is working :
http://jsfiddle.net/csdtesting/dngpq4hb/3/
I am making a form in html, and I am using a table for layout of my input controls and labels.
For each input of a form, there is one label associated with it.
I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.
I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.
Is there anyway to do it either in CSS or anything else ?
My HTML sample code :
<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>
Below is a screenshot of what I want to achieve.
You've not collapsed your table border, try this
Demo
table {
border-collapse: collapse;
}
table, td {
border: 1px solid #c00000;
}
If you could apply classes to your td's you could try this:
<table cellspacing="0">
<tr>
<td class="label">Label1: </td>
<td>input1</td>
<td class="label">Label2: </td>
<td>input2</td>
</tr>
</table>
With the following css:
table {
background-color: silver;
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid red;
border-width: 1px 1px 1px 0px;
}
td.label {
border-width: 1px 0px 1px 1px;
}
http://jsfiddle.net/H3p8e/2/
Try to apply border-collapse:collapse; rule.