So far, I'm doing this programmatically using VB.net/ASP.net:
<table cellspacing="0" cellpadding="4" border="0" style="border-
width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-
decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-
decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
</table>
<div style="width:100%;clear:both;text-align:left;margin:0;">
<div style="width:375px;float:left;margin:0;display:block;">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</div>
<div style="background-
color:#F0D3D3;width:210px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#CFF5CE;width:140px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#BEE0F7;width:210px;float:right;padding:0;margin:0;display:block;"></div>
</div>
This should give me four DIVS inside a container DIV. Here's what it's coming out as:
The correct blocks above the non-inline blocks are from a table with the same exact widths as the ones I'm using on the Divs. There isn't any CSS adding pixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here.
You can use instead of divs the colspan="[number]", for example:
<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
<tr>
<td colspan="6">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</td>
<td colspan="3" style="background-color:#F0D3D3;"></td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td colspan="3" style="background-color:#BEE0F7;"></td>
</tr>
</table>
Hoped i helped you.. =)
Width: 100% on the table overrides individual column widths. In your table, there are 13 <th>, and each will have a width of 1/13:th of the table's width. A width property on a <th> doesn't do anything. You could force it by adding display: inline-block to the <th>, but I wouldn't want to go that way.
Also, you should set the pink and green divs to float: right in order to remove the white inbetween green and blue (note however that you'll have to change the order of the divs in your code).
Also, I'd suggest using a table instead if you're aiming to present tabular data.
Did you put cellspacing="0" cellpadding="0" on the table? If not, that might be where the difference is coming from.
Or maybe border.
Can you include the table header?
Related
I would like to change the background color of the raw but it wont change
i have typed but still wont change <tr class="bg-green text-white">
<table border="0" class="table-striped" style="width:100%;table-layout:fixed">
<thead>
<tr class="bg-green text-white">
<th style="text-align:center">الترتيب</th>
<th style="text-align:center">النادي</th>
<th style="text-align:center">لعب</th>
<th style="text-align:center">فاز</th>
<th style="text-align:center">تعادل</th>
<th style="text-align:center">خسر</th>
<th class="d-none d-sm-table-cell" style="text-align:center">له</th>
<th class="d-none d-sm-table-cell" style="text-align:center">عليه</th>
<th style="text-align:center">فارق</th>
<th style="text-align:center">نقاط</th>
</tr>
</thead>
</table>
If you are using bootstrap you can use some common class to change the background color of the row. like-
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Bootstrap Ref
But if you are trying to change using only html and css, then you can try it like this.
tr{
background-color: blue;
}
I want to insert a full width row as shown in the below image by Arrow
I have tried colspan, rowspan but did not work for me so removed from question (otherwise question will mess up).
here is what i have tried: https://jsfiddle.net/eabangalore/y3Lt470z/16/
table td {
padding: 5px;
}
<table width="500px" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
<tr>
<td>
<div style="width:50px;height:70px;border-radius:50%;">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</div>
</td>
<td align="center">Alpha</td>
<td align="center">21 year</td>
<td align="center">Software</td>
</tr>
</tbody>
</table>
Qusetion: i want to add a full-width row as shown by arrow in red color area (above image)
Note: i cannot change table into divs as i'm working on maintenance project.
You looking for this table structure. You have to use once rowspan and once colspan.
<table width="500px" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:3%"></th>
<th style="width:10%">Name</th>
<th style="width:10%">Age</th>
<th style="width:10%">Designation</th>
</tr>
</thead>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">1</th>
<th class="">2</th>
<th class="">3</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
<tr>
<th class="" rowspan="2">
<img style="width:100%;height:100%;" src="https://via.placeholder.com/150"/>
</th>
<th class="">a</th>
<th class="">b</th>
<th class="">c</th>
</tr>
<tr>
<td class="" colspan="4">new row</td>
</tr>
</table>
Small Note: use instead inline style classes.
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
As you can see from my two tables, one is a different size to the other.
My first question being, why is this? when I have set the width of the <th> in the top table to 100/300/100/100/100 (=700), and in the bottom table 500/100/100 (=700)
I would like to set the first column in the lower table to invisible, as I only want to see the summary and totals of the bottom table. Also I would like the aligned with the right hand side of the upper table. Any ideas or advice would be appreciated. Is it something to do with setting the border in the style?
If I try border-left for example I am allowed to add border-width, border-style, border-colour, inherit?
(Table 2)
<table class="detailstable StartOnNewPage" align="center">
<tr>
<th style="width:500px;"></th>
<th style="text-align:left; width:100px;">Summary</th>
<th style="text-align:right; width:100px;"></th>
</tr>
<tr>
<td style="width:500px;"></td>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
<tr>
<td style="width:500px;"></td>
<td style="text-align:left; width:100px; border-top:yes;">Plant</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(PlantTotal)%></th>
</tr>
<tr>
<td style="width:500px;"></td>
<th style="text-align:right; width:100px;"><%: this.DisplayPlantPercentage%></th>
<td style="text-align:right; width:100px;"><%: this.PlantToDisplayWithTwoDecimalPlaces%></td>
</tr>
<tr>
<td style="width:500px;"></td>
<td style="text-align:left; width:100px;">Miscellaneous</td>
<th style="text-align:right; width:100px" class="FadeOutOnEdit"><%: this.FormatMoney(MiscellaneousItemsTotal) %></th>
</tr>
<tr>
<td style="width:500px;"></td>
<th style="text-align:right; width:100px;"><%: this.DisplayMiscellaneousPercentage%></th>
<td style="text-align:right; width:100px;"><%: this.MiscellaneousToDisplayWithTwoDecimalPlaces%></td>
</tr>
<tr>
<td style="width:500px;"></td>
<th style="text-align:left; width:100px;">TOTAL</th>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(TotalOfAll)%></th>
</tr>
</table>
Now Looks like:
For lower table remove the first column and use table attribute align as shown below
<table class="detailstable StartOnNewPage" align="right">
<tr>
<th style="text-align:left; width:100px;">Summary</th>
<th style="text-align:right; width:100px;"></th>
</tr>
<tr>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
....
I am trying to shrink one cell in the table, but it refuses to shring..here is my table.
<table cellspacing="0" style="position: absolute;width: 990px;margin-left: 8px;" align="center">
<thead>
<tr class='no-wrap'>
<th width="20%"></th>
<th width="10%">Our Rating</th>
<th width="10%">Users' Rating</th>
<th width="30%">Review</th>
<th width="30%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"></td>
<td width="10%">Our Rating</td>
<td width="10%">Users' Rating</td>
<td width="30%">Review</th>
<td width="30%">Price</td>
</tr>
</tbody>
</table>
The problem is that the review part doesnt shrink..even when I give it a lower percentage..why is that?
You have incorrect HTML syntax.
You need to wrap your table row elements in tr:
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
Also you have a </th> where you should have a <td> on your 2nd row, 4th cell (Review):
<td width="30%">Review</th>