I need to overwrite the following bootstrap class :
.table>tbody>tr>td {
padding: 1px 1px;
}
and I am using the following in my HTML but does not works:
<style>
#myID>tbody>tr>td {
padding: 1px 1px !important;
}
</style>
<table class="table table-hover" id="myID">
<thead>
<tr>
<th class="text-center">Column 1</th>
<th class="text-center">Column 2</th>
<th class="text-center">Column 3</th>
</tr>
</thead>
<!-- Table body -->
<tbody>
<tr>
<td style="text-align: center">data 1</td>
<td style="text-align: center">data 2</td>
<td style="text-align: center">data 3</td>
</tr>
</tbody>
</table>
I do know to much about css, please help me with this.
thanks
Try linking your custom CSS stylesheet after the bootstrap and it should work.
Related
I have pasted my code below as well as a picture of what I am trying to accomplish. "Header 2" should span 3 columns instead of 2 and "DataA1",B1,C1 should span 2 columns instead of 1. But when I specify that in my code it doesn't do anything. I am not sure what error I have run into.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
.title
{
padding: 10px;
}
</style>
</head>
<body>
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
</table>
</body>
</html>
"data A1" and the two cells below it do span two columns, and "Header2 " does span three columns, but there is no row where you would see this additional divison between column two and three. If you add a row with five cells you see what I mean (I only added that last row, I didn't change your code otherwise):
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.title {
padding: 10px;
}
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing D</th>
<td>dataD1a</td>
<td>dataD2</td>
<td>dataD3</td>
<td>dataC4</td>
</tr>
</table>
You need to add a final row that actually contains five cells for the behaviour of colspan="2" to be visible.
Then add a width to th and td to maintain the correct styles, and you can hide the empty row to match your design.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.title {
padding: 10px;
}
th, td {
width: 20%;
}
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
<tr style="visibility: hidden;" aria-hidden="true">
<th></th><td></td><td></td><td></td><td></td>
</tr>
</table>
I have a table like this and on desktop everything works fine
Here is HTML:
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
<th scope="col">Title 3</th>
<th scope="col">Title 4 </th>
<th scope="col">Title 5</th>
<th scope="col">Title 6</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Title 1:">
<span>Some title</span>
</td>
<td data-title="Title 2:">60</td>
<td data-title="Title 3">0</td>
<td data-title="Title 4:">5.0</td>
<td data-title="Title 5:">
<button>Add</button>>
</td>
<td data-title="Title 6:"></td>
</tr>
</tbody>
</table>
Problem is when I'm on mobile screen and value is not entered, it screws my layout, but when I put something like -, or . everything works fine. Here is picture
Is there any solution how to fix this? Check title attribute value is empty or not? Help please
Also my css is:
td[data-title]:before {
content: attr(data-title);
float: left;
font-size: 1em;
color: rgba(94, 93, 82, 0.75);
}
Try this:
td[data-title]{ padding: 1rem; }
Adjust the value of the padding you need.
I have a screenshot as show below which I have replicated in Bootstrap 4.
In the screenshot, on row hover the background-color: #EDEDED; shows up.
Here is the fiddle for the above screenshot.
The HTML code which I have used in order to create the table is :
<div class="body-manage-attendees">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Number</th>
<th scope="col">Table</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Amanda Doe</th>
<td>250</td>
<td>2</td>
<td>Bill</td>
</tr>
<tr>
<th scope="row">Andy Doe</th>
<td>14</td>
<td>1</td>
<td>Bill</td>
</tr>
<tr>
<th scope="row">Cameron Doe</th>
<td>250</td>
<td>4</td>
<td>No Bill</td>
</tr>
<tr>
<th scope="row">Dana Doe</th>
<td>53</td>
<td>5</td>
<td>Bill</td>
</tr>
<tr>
<th scope="row">Fred Doe</th>
<td>250</td>
<td>2</td>
<td>Bill</td>
</tr>
</tbody>
</table>
</div>
Problem Statement:
I am wondering what I need to add in the CSS so that on row hover, the background-color: #EDEDED; appears.
The bootstrap 3 class appears to still work. Try adding the hover class to your table.
<table class="table table-hover">
By doing so, this CSS class from bootstrap is applied:
.table-hover tbody tr:hover {
background-color: rgba(0,0,0,.075);
}
Feel free to override that class and change the color to whatever you wish!
Add .table-hover class to your table:
<table class="table table-hover">
Alterinatively you an also use CSS:
table.table tr:hover td, table.table tr:hover th {
background-color: #EDEDED;
}
Edit: updated JSFiddle
Good evening, I'm trying to align a table to make it like the picture, but failed to do so, I could help?
Now I have it like this:
and I'd like it to look like this:
This is my html code:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>
Specifying the colspan for the cells in the summary row will shift the final cell right.
<th colspan="4" class="text-right" scope="row">TOTAL</th>
Alternatively, you could start the row with a <td> with colspan="3", and using a class that would have no borders (controlled by your css).
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
Without that class, direct manipulation of style may work.
<td style="border:0" colspan="3"></td>
<th class="text-right" scope="row">TOTAL</th>
Updated snippet:
table {
border-collapse: collapse;
font-family: arial;
}
td,
th {
width: auto;
margin: 2px;
padding: 3px;
text-align: left;
border: 1px solid grey;
}
.noborders {
border: 0;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>
My HTML is:
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; ">
No Border here, just white background
</th>
<th style="width:60%; background-color:gray" colspan="3">
Superheading</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
How do I remove the border in the top left cell ie the cell that contains "No Border here, just white background".
Thanks.
You could do it like this - DEMO
HTML:
<body>
<style>
table, table th, table td {
border:1px solid black;
border-collapse:collapse;
}
</style>
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; background-color:white;" class="border-less"> </th>
<th style="width:60%;text-align:center" colspan="3">Assumed Growth Rate</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
</body>
CSS:
.border-less {
border-top: 1px solid white;
border-left: 1px solid white;
}
try to add :
style="border: none";
on th tag or the tr tag containing the headers.Depending on what you need..
This fiddle uses CSS and a '.borderless' class.
However, if you wanted to stick to inline styling, you could do this:
<th style="width:40%; border:none;">