Hello I want to add borders inside a table, and in the bottom of the table. With what i found, i was able to add the inner borders, however, i am getting trouble in adding also the bottom border. How can i do it ?
My table
<table class="table">
<thead>
<tr>
<th>Produto</th>
<th>Quantidade</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr v-for="c in compras">
<td>{{c.nome}}</td>
<td>{{c.qtd}}</td>
<td>{{c.valor}}</td>
</tr>
</tbody>
</table>
And the Css i have, that managed to fill the inner borders
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
border-bottom: 1px solid black;
}
Thank You
table {
border: 1px solid black;
border-bottom: 1px solid black;
}
exactly the same which you used for the inners
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 have a div with table inside. Div should be scrollable in case if table gets large.
I try to make something like an active row in a table. If user clicks on a row, the row gets outlined.
The problem is that for the first row of the table the top edge of outline is not shown, and for the other rows the left edge of the outline is not shown.
Why does this happen and how to overcome it?
$('tr').click(function(){
$('tr').removeClass('row-outline');
$(this).addClass('row-outline');
});
.row-outline{
outline: 1px solid red;
}
table {
border: 1px solid #dfdfdf;
border-collapse: collapse;
}
td {
border-bottom: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: auto; height: 50px;">
<table style="">
<tr class="row-outline">
<td>1.1</td><td>1.2</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td>
</tr>
<tr >
<td>3.1</td><td>3.2</td>
</tr>
</table>
</div>
Instead of outline try border. Check below update.
$('tr').click(function() {
$('tr').removeClass('row-outline');
$(this).addClass('row-outline');
});
.row-outline {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: auto; height: 50px;">
<table style="border: 1px solid black; border-collapse: collapse;">
<tr class="row-outline">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
</div>
The problem lies withing border-collapse
if you remove this tag the "row" gets its border properly but on the other hand the "table" border is still displayed at top and bottom so this might not be a very confincing solution
if you on the other hand simulate the table with divs you could deal with it more easily i guess:
Read more about it here:
How create table only using <div> tag and Css
In the example below, there is a border on top of the right cell. It only appears in Chrome, is it a Chrome bug?
HTML / CSS
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td>right</td>
</tr>
</table>
Here is the example as a fiddle.
Chrome Screenshot
This appears to be the same bug listed here (or similar)
An easy workaround is at the bottom of this answer.
This is a relevant comment under that bug report:
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
Here is an example that highlights the same problem:
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
.right {
border-top: double 20px #F00;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td class="right">right</td>
</tr>
</table>
I added this:
.right { border-top: double 20px #F00; }
Which results in this in Chrome:
That grey border would not be between the double red border if it was not a bug.
For comparison, this is how it should look (taken in Firefox):
Here are the rules of border conflicts:
Rule 1: You do not talk about border conflicts
The following rules determine which border style "wins" in case of a conflict:
Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.
Workaround
Here is a workaround, just don't use border-collapse: collapse:
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
<table>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
Since its a Chrome-Bug let's think up a workaround. So far I only came up with one that involves changing the html:
http://jsfiddle.net/5366whmf/24/
It adds another row:
<table style="border-collapse: collapse">
<tr><td colspan=2>top</td></tr>
<tr><td style="height: 0"></td></tr> <!-- fix for chrome -->
<tr><td style="border-top: 1px solid red">left</td><td>right</td></tr>
</table>
Click the link http://jsfiddle.net/anglimass/njAFp/
I want border left and right some space:
Now:
Want:
Please watch the "want image" left and right side. I struck 'table-row' padding(left and right). Anybody know how to do this?
I don't think you can do it on TR level. How about TD level:
table tbody tr td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
table tr td:first-child {
padding-left: 20px;
border-left: 10px solid red;
}
table tr td:last-child,
td.last-td {
padding-left: 20px;
border-right: 10px solid red;
}
This would be important in terms of x-browser compatibility as well.
EDIT: you can drop the above into your fiddle and look at it in ie7, add 'hacky' 'last-td' selector to your last TD (ie7 does not support 'last-child', but does support 'first-child')
It's kind of hacky, but it produces the effect you are looking for:
http://jsfiddle.net/njAFp/3/
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>lai</th>
<th>pola</th>
<th>vaala</th>
<th>elah</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="blank"></td>
<td>ennala</td>
<td>yamla</td>
<td>varamattala</td>
<td>vettiruven</td>
<td class="blank"></td>
</tr>
</tbody>
</table>
table{width:400px; height:auto; background:silver;border-collapse:collapse;}
table thead{}
table tbody{}
table tr{ background:silver;}
table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}
td.blank { width:20px; border:0; }
How can I make my border-bottom not overwrite my border for my table? I what the sides to be complete black and not with a little bit of gray -- or "grey" for you all in England. ;)
UPDATE: Not concerned with the bottom border of the table getting overwritten -- I'm hoping to eliminate on the sides where the border is gray.
Here is my code I'm working with and a jsfiddle.net page for your convience ;)
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
Set border-collapse:separate to your table, and add the border to the td's instead of the tr's:
http://jsfiddle.net/ptriek/uJ5zN/2/
At this point, #ptriek's solution seems to be the one that better addresses your question but, just for reference, here's a workaround using a <div> to wrap things up. This solution also keeps the last <tr>'s boarder intact and might come in handy in other situations.
Fiddle: http://jsfiddle.net/uJ5zN/4/
HTML
<div class="wrapper">
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
</div>
CSS
.wrapper
{
border: 4px solid #000;
width: 400px;
}
table {
width: 400px;
}
table tr{
border-bottom: 4px solid #CCC;
}
One way would be to use the CSS last-child selector as follows:
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
table tr:last-child {
border-bottom: 4px solid #000;
}