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>
Related
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.
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 have the following basic table:
.tabella-test{
border-collapse: collapse;
}
.tabella-test td, .tabella-test th{
border: 1px solid black;
}
<TABLE class="tabella-test">
<thead>
<tr>
<th colspan="1" rowspan="2">Tree</th>
<th colspan="1" rowspan="2">Short Description</th>
<th colspan="2">Alberto - Group 12/2009</th>
<th colspan="2">Andrea - Group 12/2010</th>
</tr>
<tr>
<th colspan="1" rowspan="1">Value (x1)</th>
<th colspan="1" rowspan="1">%</th>
<th colspan="1" rowspan="1">Value (x1)</th>
<th colspan="1" rowspan="1">%</th>
</tr>
</thead>
<tbody>
<tr>
<td>ciao</td>
<td>test</td>
<td>-165.889.226</td>
<td>-29,6</td>
<td>310.819.176</td>
<td>150,6</td>
</tr>
</tbody>
</TABLE>
I'd like to put black overlapping borders around every td and th cell. I tried with the above CSS,
but in the pdf generated by iText the output is messed up, only some borders overlap. Any hint?
I have the following problem in HTML.
I have this table that contains only a thead:
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione<</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
Now, as you can see, every th cell have setted a percentual width and contains a textual value.
My problem is that if the textual value of a cell is longer than the available space of the cell it will be automatically hidden. I want that the text is automatically wrapped to a new line.
How can I do to obtain this behavior?
Tnx
You need to set the table to have a table-layout:fixed and the th elements to be overflow-wrap:break-word
.table_legenda {
table-layout: fixed;
}
.table_legenda th {
overflow-wrap: break-word;
}
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
demo at http://jsfiddle.net/ma4bc7zj/
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;">