I have a simple example table with 3 rows and 5 columns styled with a border-collapse: collapse border.
The problem here is that I have a colspan=4 td in the second row, with IE11 (11.0.9600.17691) not showing the right border of that row.
You can see this example here: http://jsfiddle.net/j6u026oz/2/
I've tried putting an extra right border to the tr and th elements but it doesn't work.
Adding an extra th next to the colspan=4 element could solve this issue but I'd prefer to solve this problem with CSS if it's possible, as touching the HTML structure would imply a lot of changes in the project I'm working in.
Thank you!
You could add the extra column by CSS, using ::after pseudo-element:
Updated example
table {
border-collapse: collapse;
border: 1px solid black;
}
tbody > tr:first-child:after {
content: "";
display: table-cell;
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">colspan4</th>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</tbody>
</table>
remove
border-collapse: collapse;
from your css file.
use the code as below
table{
border: 1px solid black;
}
Use "outline" instead of "border".
table{
border-collapse: collapse;
border: 1px solid black;
outline: 1px solid red; /* ---- this lil' guy ---- */
}
Related
I am using a table to display data .I am trying to remove space from the left and right of th and td element.
I have tried checking on stack overflow and other places but they all remove vertical spaces between cells. What i want to remove is remove space from left and right.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
This is what i get
table
The red circle is what i want to remove.
The CSS causing the padding is not included in your example. Run this snippet and look at the output. Other CSS you are importing is causing the table width.
In Chrome, right click on one of the table cells and go inspect. Look at the styles in the devtools to see where it is coming from.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
If you use Firefox, use the Inspector. This way you can see which css attribute influences the table elements. For other browsers there should be similar possibilities.
See e.g. for Chrome, Edge
Sorry about the problem you are experiencing but I cant see it from my end. I wrote a new html file and copied your contents without any edits into it like you can see below but the issue was not detected. You too can try out and see for yourself.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
Possible reasons include:
browser issue (try to use a different browser, clear history on your browser)
you never saved your edits
your css has table attribute already added to it at the top making browser inherit them hence ignoring those for #contact_search
You could try out this for yourself in your css by the way
#contact_search{
border-collapse: collapse!important;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006!important;
line-height: 1!important;
}
please note the keyword !important for css for overriding attributes.
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 the whole of a row in the thead to have a specified border but it is not working as expected when I am using border styling attribute. But it is working using outline attribute. Here is a code snippet:
table.table, table.table * {
border: none !important;
}
table.price-table thead tr {
border: 10px solid blue;
outline: thin solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table price-table">
<thead>
<tr>
<th>Ticket Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr data-ticket-id=1>
<td class="category-ticket">Adult</td>
<td class="price-ticket">RM 20</td>
</tr>
<tr data-ticket-id=3>
<td class="category-ticket">Child</td>
<td class="price-ticket">RM 15</td>
</tr>
</tr>
</tbody>
</table>
Using border: none !important; overrides your second border declaration. The use of !important is not recommended unless it is strictly necessary. It makes maintainability a lot harder. For more information see here.
Remove following css:
table.table, table.table * {
border: none !important;
}
The above css will effect to not display border. Because you have given table.table * So, it will target all the elements of the table. and you have given !important so, no other css will override the none css.
table.price-table thead tr {
border: 10px solid blue;
outline: thin solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table price-table">
<thead>
<tr>
<th>Ticket Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr data-ticket-id=1>
<td class="category-ticket">Adult</td>
<td class="price-ticket">RM 20</td>
</tr>
<tr data-ticket-id=3>
<td class="category-ticket">Child</td>
<td class="price-ticket">RM 15</td>
</tr>
</tr>
</tbody>
</table>
Your this styling
table.table, table.table * {
border: none !important;
}
is over-riding all elements border styling to none beacuse of * you used. So if you want to apply please change this property to something you want.
And please avoid using !important unless it is too important and you want to over-write some library or framework default styling.
Try this as your css:
table.table, table.table * {
}
table.price-table thead tr {
border: 1px solid red;
outline: thin solid red;
}
check it working: https://jsfiddle.net/Aschab/6p6kht43/
As an advice, if you need !important for your css to work, you're doing it wrong. Think outside the box
I can use the CSS property border-collapse to combine the borders of adjacent table cells. And I can use empty-cells to hide table cells that have no content. But when I use both, the empty-cells property has no effect and empty cells are always visible. At least there's a border around each of them, even where multiple adjacent rows and columns are empty.
Here's an example:
<!doctype html>
<html>
<head>
<style>
table
{
border-collapse: collapse;
border-spacing: 0;
}
th,
td
{
empty-cells: hide;
border: solid 1px black;
padding: 2px 4px;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
</table>
</body>
</html>
As #Bolt explained why this happens, I will provide a solution for this, you can use the below snippet in your CSS to hide the empty cells
th:empty, td:empty {
border: 0;
}
Demo
Using :empty pseudo, I set the border: 0; so physically the element is present on the page, we just target the styles of the empty cells and set the borders to 0.
I didn't used display: none; as it will spoil your table layout, so using the above snippet is enough if you want to keep the border collapsed.
Note: The selector am using is a general selector and will target globally, if you want to target the element specifically, consider using a class instead like
.table_class_name th:empty,
.table_class_name td:empty {
/* Styles goes here */
}
This is a trick that I found, you can use border-collapse as separate. then you define border-spacing to 0px into your table then define the padding in your td to 0px.
table
{
empty-cells: hide;
border-collapse: separate;
border-spacing: 0px;
}
td
{
border: thin solid black;
text-align: right;
padding: 0px;
}
th
{
border: thin solid black;
background-color: yellow;
}
I want the headings of the table to have a red solid border and the rest of the table a dotted black border.
Using the code below, all is correct but the left and right side of the TH being black dotted. Is there any way to override the <table> borders within a TH style declaration?
This is what I want to achieve:
<style type="text/css">
table {
border-style:none dotted dotted dotted;
border-collapse: collapse;
}
table th {
border: 2px solid red;
}
</style>
<table >
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
A simple solution is to set the th border width equal to or larger than the table border width, if this is acceptable. For example, add
table { border-width: 2px; }
to make them equal. In your example, the width is the initial value, medium, which normally maps to 3px or 4px in browsers.
Otherwise, a different strategy is needed (see Zolthan Toth’s answer), a strategy where no left or right border is set on the table element.
The reason is that according to the [border conflict resolution][1] rules, the wider border wins (and for equal-width borders, solid beats dotted).
Try this - http://jsfiddle.net/eaTLp/
table {
border-style:none none dotted;
border-collapse: collapse;
}
table th {
border: 2px solid red;
}
table td:first-child {
border-left: dotted;
}
table td:last-child {
border-right: dotted;
}
You're giving the dotted border only to the bottom of the table. On the left and right you're selecting the first and last <td> in every row by :first-child and :last-child and assign them the left and right border respectively.