How can I enlarge a top-border of one cell? I've tried to set a bigger width to that cell. But it doesn't work.
I'm trying to enlarge the top-border cell which has tags_footer as a class. In fact, I'm trying also to make border width equal to the width of tags_forums + tags_description + tags_msgs
Here is code Fiddle : http://jsfiddle.net/pyXBk/
HTML :
<table>
<tr>
<td class="tags_forums">Forums</td>
<td class="tags_description">Description</td>
<td class="tags_msgs">msgs</td>
</tr>
<tr class="tags_body">
<td>ABC</td>
<td> DFG</td>
</tr>
<tr>
<td class="tags_footer">Last msg</td>
</tr>
</table>
CSS :
.tags_forums {
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.tags_description {
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.tags_msgs {
border-bottom: 1px solid gray;
}
.tags_footer{
border-top: 1px solid gray;
}
Thanks in advance.
The problem is in the HTML, not the CSS:
<td colspan="3" class="tags_footer">Last msg</td>
You need this table cell to span three columns, and that does it. The colspan attribute is what you need.
See demo at http://jsfiddle.net/audetwebdesign/pyXBk/2/
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
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
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/
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;
}