Currently there is no support for grid lines for Vuetify 3 tables ( https://github.com/vuetifyjs/vuetify/issues/16336 )
So I added them with custom CSS ( reproduction link )
<template>
<v-app>
<v-main>
<v-container>
<v-table fixed-header height="300px">
<thead>
<tr>
<th>First header</th>
<th>Second header</th>
<th>Third header</th>
</tr>
</thead>
<tbody>
<tr v-for="index in 30">
<td>{{ index }}</td>
<td>{{ index }}</td>
<td>{{ index }}</td>
</tr>
</tbody>
</v-table>
</v-container>
</v-main>
</v-app>
</template>
<style>
/* https://github.com/vuetifyjs/vuetify/issues/16336 */
table {
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
table th + th {
border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
table td + td {
border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
</style>
which seems to work fine but there is one problem... When scrolling down the fixed header looses the top border.
Do you know how to fix that? Is my CSS incomplete?
You can solve this problem by adding border-top to the th tags.
table th {
border-top: 1px solid rgb(var(--v-border-color), var(--v-border-opacity))
}
Not over yet...
Remove the top border of the table cause It increases the border width.
table {
margin-top: -1px; /* 1px is the width of the <table> border */
}
You can add a top border to the table header :
table, table th {
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
the table header will have a top border, and it will not be lost when scrolling down.
Related
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
I am trying to achieve this table look
How can I make the first heading to fill the entire width? Something like flex: 1 would do. Also, how can I add border to only elements in the table like on the picture, instead of entire table?
.center {
text-align: center;
}
table {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
I need this to look like
Image
You can do like below:
.center {
text-align: center;
}
td,
th {
padding: 3px 5px; /* control the spacing */
}
table {
border-collapse: collapse; /* this is mandatory to correctly use border */
border-bottom: 1px solid black; /* only border bottom here */
}
th:first-child {
width: 100%; /* take as much space as possible */
}
tr:nth-child(2) {
border-top: 1px solid black; /* border top to second tr */
}
tr:not(:first-child) {
/* right and left to all except the first one */
border-left: 1px solid black;
border-right: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
For styling the first raw(table header) there are many solutions fastest one by selecting table first raw
table tr:first-child{
border: 1px solid black;
}
I recommend you to read this article first: A Complete Guide to the Table Element
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
I have the following problem: When I translate the header cells from a table and the table is set to border-collapse:collapse then the cells will be moved but not their borders. I created a test:
Markup:
<table>
<thead>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
</thead>
<tbody>
<tr>
<td>asdasd</td>
<td>adasdasd</td>
<td>adasdasd</td>
</tr>
</tbody>
</table>
Style:
table{
border-spacing: 0;
border-collapse: collapse;
background: #efefef;
}
th {
background:#ccc;
border-right: 1px #000 solid;
transform: translate(-10px, 0);
}
http://jsfiddle.net/rs0h9tbu/2
If I change border-collapse to separat everything works fine.
Is it a bug, or can anybody explain that behaviour?
This is the behaviour of the collapsing border model. When border-collapse is set to collapse, then the cells share the border with that of the edge element which is the table. If it is set to separate, then the cells have their own border.
From this ref: https://developer.mozilla.org/en/docs/Web/CSS/border-collapse
The border-collapse CSS property determines whether a table's borders
are separated or collapsed. In the separated model, adjacent cells
each have their own distinct borders. In the collapsed model, adjacent
table cells share borders.
And from this spec: http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
In the collapsing border model, borders at every edge of every cell
may be specified by border properties on a variety of elements that
meet at that edge (cells, rows, row groups, columns, column groups,
and the table itself)
This is why when you translate the cells, only the cells move because they are not having their own borders and only sharing the borders of the edge-element (i.e. table).
If you really really need to transform and move the th cells, then keep the border-collapse as separate and control the borders on td/th individually.
Something like this:
table {
border-spacing: 0px;
border: 1px solid #333;
background: #efefef;
border-collapse: separate;
}
th,td { border: 1px solid #333; }
td { border-right: 0px; }
td:first-child { border-left: 0px; }
tbody > tr:last-child > td { border-bottom: 0px; }
th { background: #ccc; transform: translate(50px, 50px); }
<table>
<thead>
<tr>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>asdasd</td>
<td>adasdasd</td>
<td>adasdasd</td>
</tr>
</tbody>
</table>
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.