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
Related
I would like to highlight a row (change the background color) when i hover over any cell excluding the first 3 cells on the row (button cells). I also need to exclude the first row from the grid as that is the header row. (Images show desired behavior)
I have tried using many different :hover css selectors. But i cant seem to find the combination that allows me to highlight the row when hovering over any cell except the first 3.
table tr:hover td {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
Thanks!!
The 4th, 5thth, and 6th
columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately.
In order to meet the following criteria:
no JavaScript
valid HTML and CSS only
the 4th, 5thth, and 6th <td> of any <tr> within the <tbody> should all be highlighted at once if any one of them is hovered over.
the 1st, 2nd, and 3rd <td> of any <tr> within the <tbody> should never trigger any effects when hovering over them.
A sub-table could be used to isolate the last 3 columns:
in the <tbody>, remove the last 2 <td> of each <tr>.
add colspan="3" to the last <td> of each <tr> within the <tbody>
add a <table> into each of those <td colspan="3">
add a <tr> into that <table>
add 3 <td> into that <tr>
Figure I - a sub-table
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
table {
table-layout: fixed;
border-collapse: collapse;
}
th {
width: 5%;
}
th:nth-of-type(4) {
width: 50%;
}
th:nth-of-type(5) {
width: 5%;
}
th:nth-of-type(6) {
width: 15%;
}
td {
border: 1px solid #000;
background: transparent;
text-align:center;
}
.col {
padding: 0;
border: 0;
outline: 1px solid #000;
outline-offset: 0;
}
.sub tr:hover td {
background: #fc0;
}
.sub {
table-layout: fixed;
border-collapse: collapse;
min-width: 100%;
padding: 0;
border: 0.5px solid #000;
}
.sub td {
padding: 5px;
border: 1px solid 0.5px;
text-align: left;
}
.sub td:first-of-type {
width: 70%;
border-left: 0;
}
.sub td:nth-of-type(2) {
width: 10%;
text-align: center;
}
.sub td:last-of-type {
width: 20%;
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
</tr>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Jill</td><td>37</td><td>Female</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
It is not fully possible without JS as CSS has no parent selector. A few browsers (Safari and Chrome Desktop) already included the :has()-selector but as said, it is not fully supported yet.
The closest thing you an do without scripting is to highlight all th in a row. That said, you can use the tr:hover selector to check for a hover on the entire row. This means the hover will also trigger if you hover the first 3 elements. The background-highlighting therefore will only be used on the th. To exclude the first row you can use the :not()-selector:
table tr:not(:nth-child(1)):hover th {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
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.
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/
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 ---- */
}