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.
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 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.
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
#for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">#(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
I am trying to implement cellpadding and cellspacing in my forum, but I just can't get the width="100%" to work with it.
Is it possible to set a width while using cellpadding or cellspacing in my CSS?
.categories div.category td tr{
padding: 80px;
width: 500px;
}
echo '
<table class="categories">
<caption>Category: ', $row2['category'], '</caption>
<thead>
<tr>
<td colspan="3">
<th colspan="3"><a href="create_music_sub.php?cat='.$row2['id'].'&admin='.$row2['admin'].'">
Click here to Create Sub Category
</a></th>
</td>
</tr><tr>
<div class="category"><th scope="col">Category</th></div>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
</thead><tbody>';
If what you meant is to set the table's width to 100%, this works.
And as for the code you provided there were mistakes:
When you want to use a th you don't use a td with it.
The div.category should be inside the tr > th not wrapping it.
When you're posting a question please remove the php fragments and provide a working fiddle for us to be able to help you faster.
Please look at the code to see what I did differently. I think the problem was in your html
table{
border:1px solid black;
width: 100%;
}
tr, th, td{
border:1px solid black;
}
td,th{
padding: 10px;
}
/*If you want the last column to be smaller you can change one of them to a certain width*/
.creator{
width:20%;
}
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
</tr>
</thead>
</table>
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col" class="creator">Creator</th>
</tr>
</thead>
</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;">