My line in turquoise color must be 5% width and I see it's a lot more? Why do I have this problem? Why the widths of each color are not respected?
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="table-responsive" *ngIf="strikes.length > 0">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" style="width: 44%; text-align: center;">CALL</th>
<th class="exoPrice" scope="col" style="width: 12%;background-color: #dee2e657;">
</th>
<th scope="col" style="width: 44%; text-align: center">PUT</th>
</tr>
<tr>
<th scope="col" style="width: 3%; background-color: aqua;"></th>
<th scope="col" style="width: 25%; background-color: green;">Quantity</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
If you want to have various width for the table cells, you need to have multiple tables.
Make sure that the width of all cells add up to 100%. So if you want to achieve a table row with a cell of 5% and another cell with 25% width, you need to have a third empty cell with 70%.
I have added background-color orange for the third cell in this case just for the visibility, but you can remove that.
<div class="table-responsive">
<table class="table table-striped" style="width:100%">
<tr>
<td scope="col" style="width: 44%; text-align: center;">CALL</td>
<td class="exoPrice" scope="col" style="width: 12%; background-color: #dee2e657;"></td>
<td scope="col" style="width: 44%; text-align: center">PUT</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td scope="col" style="width: 5%; background-color: aqua;"></td>
<td scope="col" style="width: 25%; background-color: green;">Quantity</td>
<td scope="col" style="width: 70%; background-color: orange;"></td>
</tr>
</table>
</div>
Related
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>
I have fixed first 2 columns of table but it is showing one extra row in table header.
.headcol {
position:absolute;
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
position:absolute;
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
In this it has fixed first 2 columns but the first interest is show on the empty row.Please help.You can see my design at below :
https://jsfiddle.net/rahulpamnani/nnukubyu/1/
You have to remove the position: absolute
like so:
.headcol {
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
Hope this helps
Remove absolute position so that the second heading does not overlap
If this is what you wanted and i understood the question
.headcol {
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
.headcol
{
position:absolute;
width:7em;
top:auto;
left: 0px;
}
.headcol2
{
position:absolute;
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th></th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
Just Create an extra column in second row.I want first 2 columns of table to fixed when any scroll the table horizontally.
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>
I want a table with scrollable body with fixed header.
This is my html code. I am using foundation also.
<div class="large-10 medium-10 small-12 row">
<table style = "height: 13% !important;">
<thead>
<th style="width:150px">Customer TKN</th>
<th style="width:150px">Customer Name</th>
<th style="width:150px">Meter Read Date</th>
<th style="width:100px">Bill Amount</th>
<th style="width:100px">No. of Billing Accounts</th>
<th style="width:100px">No. of Active Accounts</th>
<th style="width:100px">No. of Processed Accounts</th>
<th style="width:150px">title</th>
</thead>
<tbody id="rec_tab_boby">
<tr>
<td id="cust_id" style="width:150px">1234</td>
<td style="width:150px">Mark Jack</td>
<td style="width:150px">2015-08-20</td>
<td style="width:100px">23.55</td>
<td style="width:100px">5</td>
<td style="width:100px">4</td>
<td style="width:100px">4</td>
<td class="status-for-popup" style="width:150px">22</td>
</tbody>
</table>
This id my css
#rec_tab_boby{
height: 80% !important;
overflow-y: scroll;
display: inline-block;
width: 64rem;
}
the code works in chrome and in ie 10 and above but it does not work in ie 9.
What can be the problem?
I feel ie 9 is not taking display: inline-block.
I'd like to make to following table adapt its width to the cells, instead of its container:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The width of the container is narrower than the sum of the cell width. It is okay to show horizontal scroll bar here, but the table just can't be wider than its container. If I calculate the sum width for the colspan and the table, it can do the job, but what if the cells has non-px width, like "%" or "em"? Then static px calculation can't work.
Current effect is:
The expected effect would be the table's width exceeding the container div's width.
But setting width directly to the table also has problems: the width set for cells will be ignored. For example:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed; width: 900px;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The effect is:
Note the 2nd cell (should be 200px) is as narrow as the 1st and 3rd one.
Anybody could shed some light on this issue? Thanks in advance.
add css:
th{
min-width:50px; /*for instance*/
}
div{
overflow-x:scroll;
}
and remove style='table-layout: fixed; width: 1px;' from the table
Would positioning the table absolutely be acceptible?
<table border="1" style="position:absolute;">
This works such that the div no longer contains the table horizontally. But, of course, the div also no longer contains the table vertically. You could work around this by giving the div height manually, though.
Merijn's answer works, tweaked slightly, for the fixed-width cells case:
Instead of specifying a global th min-width, specify it per cell like so:
<th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>
At least this way, your individual width's are not ignored, giving you a table wider than the container, and with irregular width cells.