I am trying to achieve this effect:
I have tried the following but it does not work at all (no borders appear at all). Can anyone explain how to achieve what I would like.
<style type="text/css">
.withBorder {
border: 1px;
}
.withoutBorder {
border: 0px;
}
</style>
<table>
<tr>
<td class = 'withoutBorder'> cell1 </td>
<td class = 'withBorder'> cell2 </td>
<td class = 'withoutBorder'> cell3 </td>
</tr>
<tr>
<td class = 'withBorder'> cell1 </td>
<td class = 'withoutBorder'> cell2 </td>
<td class = 'withBorder'> cell3 </td>
</tr>
</table>
You need border-collapse on the table, like so:
table {
border-collapse: collapse;
}
.withBorder {
border: 1px solid #000;
}
.withoutBorder {
border: none;
}
Attached a Fiddle.
Also, you can make your code more concise by using nth-child selectors. You don't need to explicitly set class names on each table cell. This solution works if you add rows or columns to your table too. See updated Fiddle.
table {
border-collapse: collapse;
}
tr:nth-child(2n+1) td:nth-child(2n+2),
tr:nth-child(2n+2) td:nth-child(2n+1) {
border: 1px solid #000;
}
Try
.withBorder {
border: 1px solid black;
}
You should have defined type and color after size of the border.
Related
Im trying to select a section on a table by making its border thicker on a selected area, so I need to change the border on specifics cells to get something like this.
this is my best try for the upper one.
every selected cell has a "selected" class, and if there is a selected cell, the row has a selected class too. I hope you get it ;)
.table tr.selected:first-child td.selected{
border-top-width:5px;
border-top-color:#000;
}
is it possible?
If you are not restricted with these specific class names, you can add a custom class to cells of the last selected row. If you cannot modify the HTML, you can try to add the custom classes with JavaScript.
var selectedRows = document.querySelectorAll('tr.selected');
selectedRows[selectedRows.length-1].classList.add('last-selected-row');
table{
border-collapse: collapse;
}
table tr td{
border: 1px solid #e2e4e8;
padding: 10px;
}
table td.selected{
background-color: #cae5cd;
}
table tr.selected td.selected:first-child{
border-left: 3px solid black;
border-right: none;
}
table tr.selected td.selected:last-child{
border-right: 3px solid black;
border-left: none;
}
table tr.selected td.selected + td:not(.selected){
border-left: 3px solid black;
}
table tr:not(.selected) + tr.selected td.selected{
border-top: 3px solid black;
border-bottom: 1px solid #e2e4e8;
}
table tr.last-selected-row td.selected{
border-bottom: 3px solid black;
}
<table>
<tr>
<td>far east</td>
<td></td>
<td>USD</td>
</tr>
<tr>
<td>pol</td>
<td>pod</td>
<td>USD</td>
</tr>
<tr class="selected">
<td class="selected">VALENCIA MADRID</td>
<td class="selected">BRISBANE</td>
<td>USD</td>
</tr>
<tr class="selected">
<td class="selected">VALENCIA MADRID</td>
<td class="selected">Melbourne</td>
<td>USD</td>
</tr>
<tr class="selected">
<td class="selected">VALENCIA MADRID</td>
<td class="selected">SYDNEY</td>
<td>USD</td>
</tr>
<tr>
<td>VALENCIA MADRID</td>
<td>Chongoing</td>
<td>USD</td>
</tr>
</table>
The padding and the border styles I have added in the snippet are just for demo purpose.
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 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/
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.
I want to highlight the borders of cells having the class active.
The problem is the table's border-collapse property is set to collapse, which will hide the top and left border of cells(except for left most and top row cells). This is causing an issue whereby the highlight class(active) is not highlighting the top and left borders.
You can find the problem here.
HTML
<div style="padding: 10px">
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td class="active">2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
<td>5.4</td>
<td>5.5</td>
</tr>
</table>
</div>
CSS
table {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid lightgrey;
height: 60px;
width: 60px;
text-align: center;
vertical-align: middle;
}
td.active {
border: 1px solid blue;
}
td.brdr-b-hide {
border-bottom: none;
}
td.brdr-r-hide {
border-right: none;
}
Javascript
$('table').on('click', 'td', function(e){
var target = $(e.currentTarget);
if(e.ctrlKey && target.hasClass('active')){
target.removeClass('active');
} else if(e.ctrlKey) {
target.addClass('active');
} else {
$('table td.active').removeClass('active');
target.addClass('active');
}
});
One of the solutions I'm working on is to hide the border-right of the cell in the left of the active cell and the border-bottom of the cell at the top.
I'm not so happy with the solution since the active class is applied and removed when a cell is clicked. Here my solution need to find the prev cell and the top cell and apply/remove the corresponding classes to/from them.
You can find the proposed solution here.
My question is, is there a better way to handle this problem?
Define border-style:double. Write like this:
td.active {
border: 1px solid blue;
border-style:double;
}
Check this http://jsfiddle.net/2ahfP/18/
Try this instead:
td.active {
outline: 1px solid blue;
}
The difference between outline and border is that outline won't add to the elements total width or height. Also the border-collapse property won't affect the outline.