any ideas how to avoid this issue when using border-bottom: 2px dotted black; in tables?
CSS:
.plain-list tr td {
color: #eee;
border-bottom: 2px dotted #eee !important;
font-size: 20px !important;
border-top: none;
}
HTML
<table сlass="table table-striped plain-list desktop-table">
<tbody>
<tr>
<th><strong>test</strong></th>
<th><strong></strong>test</th>
<th><strong></strong>test</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
I'm using bootstrap 3 for tables.
Is it some known issue or there is something wrong with boreder definitions?
give a spacing of 1 like this
<table cellpadding="0" cellspacing="1">
example : https://jsfiddle.net/ud2xj9fh/
Related
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
Html is not my specialty :)
I have an Html table and I want to have a solid line between each row. I've done it by defining a border-bottom on each <td> tag, like so:
<td style="border-bottom: 1px solid #0066ff;">[content]</td>
But it comes out with a one-pixel gap in the line, as seen below:
I tried putting the border-bottom in the <tr> tag, but that didn't work at all. What's the correct way to do this?
You may use the CSS attribute border-collapse and set it to collapse:
table
{
border-collapse: collapse;
}
td
{
border-bottom: solid 1px black;
}
<table>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
Try this.
table {
border-collapse: collapse;
}
td {
padding: 10px 0;
}
tr {
border-bottom: 1px solid #0066ff;
}
Give cellspacing 0 to the table
<table cellspacing="0">
<tr>
<td style="border-bottom: solid 1px;">sdfa</td>
<td style="border-bottom: solid 1px;">asfsaf</td>
</tr>
</table>
Example: JSFiddle
Pictures are worth much more than words, in this case. See how the intersection of the top, black bar and the lightgrey, vertical bar between 'Left' and 'Right' is lightgrey instead of black? Is there a way to ensure that one border is shown 'above' another, kind of like a z-index?
How it looks:
How I want it to look (adjusted with image editor):
Here's a jsfiddle for my issue. If you don't like jsfiddle, for whatever reason, my HTML and CSS are below.
HTML:
<table id="tiresTable" class="table">
<tr class="firstRow">
<td class="thSim">Tires:</td>
<td class="thXAxis borderRight">Left</td>
<td class="thXAxis">Right</td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Front</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Rear</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr>
<td class="thYAxis">Spare</td>
<td colspan="2"></td>
</tr>
</table>
CSS:
#tiresTable{
border-collapse: collapse;
}
#tiresTable tr.firstRow td{
border-bottom: 1px solid black;
}
#tiresTable td.thSim, #tiresTable td.thYAxis{
border-right: 1px solid black;
}
#tiresTable td.borderRight{
border-right: 1px solid lightgrey;
}
#tiresTable tr.borderBottom{
border-bottom: 1px solid lightgrey;
}
Please note that, due to technological constraints, I cannot use CSS3 properties. Also note that I will not be offended if you edit my question title if you can describe the issue more eloquently than I have.
EDIT:
It was a little hacky but I was able to do something that works as you need.
HTML:
<table id="tiresTable" class="table">
<tr class="firstRow">
<td class="thSim">Tires:</td>
<td class="thXAxis borderRight">Left</td>
<td class="thXAxis">Right</td>
</tr>
<tr class="border-bottom">
<td colspan="3"><div class="black"></div></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Front</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Rear</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr>
<td class="thYAxis">Spare</td>
<td colspan="2"></td>
</tr>
</table>
CSS:
#tiresTable{
border-collapse: collapse;
}
#tiresTable tr.borderBottom{
border-bottom: 1px solid lightgrey;
}
#tiresTable td.borderRight{
border-right: 1px solid lightgrey;
}
#tiresTable td.thSim, #tiresTable td.thYAxis{
border-right: 1px solid black;
}
.border-bottom {
height: 1px;
}
.border-bottom td {
height: 1px;
border: 0px;
padding: 0px;
}
.black {
background-color: black;
height: 1px;
}
I removed anything that is not really required, and used altered classes names to know easily what is new and what is not.
Fiddle: http://jsfiddle.net/ru92py4m/15/
Is it possible to border a table row, <tr> in one go instead of giving a border to individual cells, <td> like,
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
<tbody>
<tr>
<th style="width: 96px;">Column 1</th>
<th style="width: 96px;">Column 2</th>
<th style="width: 96px;">Column 3</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
This gives a border around the given <tr> but it requires a border around individual cells.
Can we give a border to <tr> only in one go?
→ jsFiddle
You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)
Thus, you need to use collapsing borders. Example:
<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>
Absolutely! Just use
<tr style="outline: thin solid">
on which ever row you like. Here's a fiddle.
Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.
Yes. I updated my answer DEMO
table td {
border-top: thin solid;
border-bottom: thin solid;
}
table td:first-child {
border-left: thin solid;
}
table td:last-child {
border-right: thin solid;
}
If you want to style only one <tr> you can do it with a class: Second DEMO
You can use the box-shadow property on a tr element as a subtitute for a border. As a plus, any border-radius property on the same element will also apply to the box shadow.
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
Make use of CSS classes:
tr.border{
outline: thin solid;
}
and use it like:
<tr class="border">...</tr>
Left cell:
style="border-style:solid;border-width: 1px 0px 1px 1px;"
midd cell(s):
style="border-style:solid;border-width: 1px 0px 1px 0px;"
right cell:
style="border-style:solid;border-width: 1px 1px 1px 0px;"
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
<tbody>
<tr>
<th style="width: 96px;">Column 1</th>
<th style="width: 96px;">Column 2</th>
<th style="width: 96px;">Column 3</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
You can try this (Border Just bottom of every row)
table {
border-collapse: collapse;
}
tr {
border-bottom: 1px solid black;
}
adding border-spacing: 0rem 0.5rem; creates a space for each cell (td, th) items on its bottom while leaving no space between the cells
table.app-table{
border-collapse: separate;
border-spacing: 0rem 0.5rem;
}
table.app-table thead tr.border-row the,
table.app-table tbody tr.border-row td,
table.app-table tbody tr.border-row th{
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
vertical-align: middle;
white-space: nowrap;
font-size: 0.875rem;
}
table.app-table thead tr.border-row th:first-child,
table.app-table tbody tr.border-row td:first-child{
border-left: 1px solid #EAEAEA;
}
table.app-table thead tr.border-row th:last-child,
table.app-table tbody tr.border-row td:last-child{
border-right: 1px solid #EAEAEA;
}
After fighting with this for a long time I have concluded that the spectacularly simple answer is to just fill the table with empty cells to pad out every row of the table to the same number of cells (taking colspan into account, obviously). With computer-generated HTML this is very simple to arrange, and avoids fighting with complex workarounds. Illustration follows:
<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
<tr style="border-top:1px solid darkblue;">
<th>Col 1<th>Col 2<th>Col 3
<tr style="border-top:1px solid darkblue;">
<td>Col 1 only
<tr style="border-top:1px solid darkblue;">
<td colspan=2>Col 1 2 only
<tr style="border-top:1px solid darkblue;">
<td>1<td>2<td>3
</table>
<h3>Simple solution, artificially insert empty cells</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
<tr style="border-top:1px solid darkblue;">
<th>Col 1<th>Col 2<th>Col 3
<tr style="border-top:1px solid darkblue;">
<td>Col 1 only<td><td>
<tr style="border-top:1px solid darkblue;">
<td colspan=2>Col 1 2 only<td>
<tr style="border-top:1px solid darkblue;">
<td>1<td>2<td>3
</table>
Here what I want to achieve: http://jsfiddle.net/LxwXc/3/
When I have this code in my website, I have gaps between tds. Do you have any ideas what can it be? I am just going crazy...
.goodtable td
{
border-bottom: 1px solid black;
border-left: none;
border-right: none;
border-top: none;
padding: 10px;
}
</style>
<table class="goodtable" cellpadding="10" cellspacing="8">
<tr>
<td width="150px">Username:</td>
<td width="150px">opera</td>
</tr>
<tr>
<td>Gender:</td>
<td>Male</td>
</tr>
<tr>
<td>Age:</td>
<td>19 (1992-01-01)</td>
</tr>
<tr>
<td>Country, city:</td>
<td>hey, Afghanistan</td>
</tr>
<tr>
<td>Height:</td>
<td>187 centimetres</td>
</tr>
</table>
You have cellpadding and cellspacing set. Those are causing the gaps.
Get rid of them, and define padding values inside the td instead.
Alternatively, you can set border-collapse: collapse; but in that case, use the border-spacing CSS property to set the spaces. cellspacing and cellpadding are deprecated.