I have table layout as fixed
table {
padding: 8px;
width: 100%;
table-layout: fixed;
}
td,
th {
text-align: center;
padding: 8px;
table-layout: auto;
}
<table>
<tr>
<th>Part No</th>
<th>Description</th>
<th style="text-align:center; width:100%; position:relative;z-index:5;">Part Status</th>
<th>Zone</th>
<th>Min Qty</th>
<th>Max Qty</th>
<th>Cost</th>
<th>Proposed Cost</th>
<th>Varience (%)</th>
<th style="text-align:center; width:100%;">Status</th>
<th>Pending Removal</th>
<th>Approvl Status</th>
<th>Locked</th>
<th>EffectiveDate</th>
</tr>
</table>
The part status and status columns there TD changing its position when i zoom it to -25%.
In image you can find partstatus(6th column) its td position is changed.
Can anybody help me out how can i solve this.
Use flex. display:inline-flex; on table.
table {
padding: 8px;
width: 100%;
table-layout: fixed;
display:inline-flex;
}
td,
th {
text-align: center;
padding: 8px;
table-layout: auto;
}
<table>
<tr>
<th>Part No</th>
<th>Description</th>
<th style="text-align:center; width:100%; position:relative;z-index:5;">Part Status</th>
<th>Zone</th>
<th>Min Qty</th>
<th>Max Qty</th>
<th>Cost</th>
<th>Proposed Cost</th>
<th>Varience (%)</th>
<th style="text-align:center; width:100%;">Status</th>
<th>Pending Removal</th>
<th>Approvl Status</th>
<th>Locked</th>
<th>EffectiveDate</th>
</tr>
</table>
Related
I would like some help, please, to align data in a table starting at specific columns and aligning to the left.
All data needs to be aligned to the left in the 3 specific columns shown, and should wrap any data that doesn't align.
Please see the current code below.
How can I change this?
I would like the following configured in the Table:
Column 1 to be a maximum of 10 characters.
Column 2 a maximum of 50 characters.
Column 3 a maximum of 10 characters.
All left aligned.
And any data that is inserted beyond the characters above should wrap.
body {
background-color: powderblue;
}
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>123245</th>
<th>This is a description of item 1</th>
<th>100</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>678910111213</th>
<th>This is a description of item 2 and it is longer than description 1</th>
<th>1000</th>
<th class="right">Item 4</th>
</tr>
</table>
Thanks in advance for any help provided.
I've added a bit of CSS to make this work:
th {
text-align: left;
}
tr a {
display: block;
word-wrap: break-word;
}
tr th:nth-child(1) a {
width: 10ch;
}
tr th:nth-child(2) a {
width: 42ch; // Adjusted
}
tr th:nth-child(3) a {
width: 10ch;
}
The ch unit which is based on the 0 glyph width is not perfect, which is why the 50-character limit is actually 42ch in the CSS code.
body {background-color: powderblue;}
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
th {
text-align: left;
}
tr a {
display: block;
word-wrap: break-word;
}
tr th:nth-child(1) a {
width: 10ch;
}
tr th:nth-child(2) a {
width: 42ch; // Adjusted
}
tr th:nth-child(3) a {
width: 10ch;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>Thisis10ch</th>
<th>This is an easy good nice well 50 character string</th>
<th>100</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>Thisis10ch wrapped</th>
<th>This is an easy good nice well 50 character string wrapped</th>
<th>1000</th>
<th class="right">Item 4</th>
</tr>
</table>
</body>
</html>
You may take a look at table-layout and vertical-align properties .
Possible example:
body {
background-color: powderblue;
}
table {
table-layout: fixed;
text-align: left;
border-spacing:0.5em;
}
tr>* {
max-width: 10ch;
word-break: break-all;
vertical-align:top;
}
tr>*:nth-child(2) {
max-width: 50ch;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>123245</th>
<th>This is a description of item 1</th>
<th>100</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>678910111213</th>
<th>This is a description of item 2 and it is longer than description 1</th>
<th>1000</th>
<th class="right">Item 4</th>
</tr>
</table>
One approach is as follows:
body {
background-color: powderblue;
}
/* to allow the browser to split words at any point when
required to allow for a line-break: */
td {
word-break: break-all;
}
/* selecting any element that is a <th> or a <td> that
does not match the '.right' selector: */
:is(th, td):not(.right) {
/* aligning text to the logical inline start,
in a left-to-right language (such as English)
that is equivalen to 'text-align: left': */
text-align: start;
}
/* selecting all <th> and <td> elements that are
the :first-child, or the :nth-child(3),
of it's/their parent: */
:is(th, td):is(:first-child, :nth-child(3)) {
/* there are no CSS sizes exactly equal to '1 character'
as characters vary enormously in their sizing; the 'ex'
unit is equal to the width of the lower-case 'x'
character, which allows for a near-match on average to
10 characters wide (though ch is another option): */
max-width: 10ex;
}
/* selecting all <th> and <td> elements that are the second-
child of their parent: */
:is(th, td):nth-child(2) {
/* setting the width to 50ex, the width of 50 lowercase 'x'
characters to approximate a 50 character length: */
max-width: 50ex;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>123245</td>
<td>This is a description of item 1</td>
<td>100</td>
<td class="right">Item 4</td>
</tr>
<tr>
<td>678910111213</td>
<td>This is a description of item 2 and it is longer than description 1</td>
<td>1000</td>
<td class="right">Item 4</td>
</tr>
</tbody>
</table>
References:
CSS Values and Units: Lengths.
:first-chil.
:is.
:not().
:nth-child().
text-align.
word-break.
You can idea from here and try to learn HTML table. it's a very important thing.
HTML:
<table>
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Item 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>123245
<td>This is a hello world description of item 1</td>
<td>10045467643456457647345456363653</td>
<td>Item 4</td>
</tr>
<tr>
<td>5463463
<td><a href="#">Visitors will now see your public and anonymized private
contributions.
Visitors will now see your public and anonymized private contributions.
</a></td>
<td>1004546764345645764734</td>
<td>Hello test 4</td>
</tr>
</tbody>
</table>
CSS:
body {
background-color: powderblue;
}
table * {
text-align: left;
word-break: break-all;
}
table thead th:first-child,
table tbody tr td:first-child {
width: 50px;
}
table thead th:nth-child(1) {
width: 200px;
}
table thead th:nth-child(2) {
width: 200px;
}
table thead th:nth-child(3) {
width: 200px;
}
table thead th:last-child,
table tbody td:last-child {
width: 100px;
text-align: right;
}
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
Here is html and CSS code:
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr>
<div class="hi">
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</div>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
Output
Here background color blue for class hi not shown
so what can be the reason
and what is the possible solution for this
If you use div as anything other than a cell value, you'll get misbehaving browsers.
Wrap your header row definition around the thead tag and style that instead. Don't forget to then wrap the body around tbody.
table,
th,
td {
border: 1px solid blue;
border-collapse: collapse;
}
td {
text-align: center;
}
td {
padding: 10px;
color: #cc7722;
}
table {
border-spacing: 5px;
background-color: yellowgreen;
font-weight: bold;
width: 100%
}
#hello {
color: red;
}
.hi {
background-color: blue;
}
<table>
<caption id="hello">Employee Data</caption>
<thead class="hi">
<tr>
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</tbody>
</table>
you can't use a div within a table for styling. just apply the class to the tr itself
html
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th>Employee Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
Your table shouldn't have a div inside, instead you have to do like this:
<tr class="hi">
add div inside th,td it'll work not outside
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr>
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</div>
</tr>
<tr>
<td><div class="hi">Vaibhav</div></td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
I think what you want to do is changing the <tr> background, which you can easily accomplish by removing your <div> and giving the class to your <tr> tag. As the following:
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th>Employee Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
And your CSS is just the same.
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
Does moving the class to the th accomplish what you are wanting?
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th >Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
If possible to change html then You can use combination of thead, tbody to set different colors to table head and body.
Example
<style>
thead {color:green;}
tbody {background:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
All tr in tbody will have background blue.
Otherwise you have to use styling for tr, th separately
I need to give padding in my table and a bottom border for each row.
For this, I have created a class and using that class with tr tag.
Here is my code.
<html>
<head>
<style>
#topLevel{
background:powderblue;
padding:30;
}
#container{
background: white;
}
.row{
background:white;
padding: 10;
border-bottom: 1pt solid black;
font-family: calibri;
font-size: 12px;
color : #979799;
}
th {
text-align: left;
}
</style>
</head>
<body>
<div id="topLevel">
<div id ="container">
<table style="width:100%">
<tr class = "row"> <th>CLAIM NO</th> <th>POLICY NO</th> <th>CLAIMANT NAME</th> <th>DATE OF INCIDENT </th> <th>REPORTED DATE</th> <th>CITY</th> <th>MOBILE NO</th> <th>ACTIONS</th>
</tr>
<tr class = "row"> <td>CLAIM NO</td> <td>POLICY NO</td> <td>CLAIMANT NAME</td> <td>DATE OF INCIDENT </td> <td>REPORTED DATE</td> <td>CITY</td> <td>MOBILE NO</td> <td>ACTIONS</td></tr>
</table>
</div>
</div>
</body>
</html>
Please help
Since this is a table, you'd want to give the table border spacing:
table {
border-spacing:10px 10px;
}
OR
Give the table heads and table rows the padding:
tr.row th, tr.row td {
padding: 10px;
}
you have to do the padding on the td element
.row td {
padding-top:10px;
padding-bottom:10px;
}
.row td:first-child {
padding-left:10px;
}
.row td:last-child {
padding-right:10px;
}
You need to display as block, otherwise, it won't accept padding.
#topLevel{
background:powderblue;
padding:30px;
}
#container{
background: white;
}
.row{
background:white;
padding: 10px;
border-bottom: 1px solid black;
display:block;
font-family: calibri;
font-size: 12px;
color : #979799;
}
th {
text-align: left;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="topLevel">
<div id ="container">
<table style="width:100%">
<tr class = "row"> <th>CLAIM NO</th> <th>POLICY NO</th> <th>CLAIMANT NAME</th> <th>DATE OF INCIDENT </th> <th>REPORTED DATE</th> <th>CITY</th> <th>MOBILE NO</th> <th>ACTIONS</th>
</tr>
<tr class = "row"> <td>CLAIM NO</td> <td>POLICY NO</td> <td>CLAIMANT NAME</td> <td>DATE OF INCIDENT </td> <td>REPORTED DATE</td> <td>CITY</td> <td>MOBILE NO</td> <td>ACTIONS</td></tr>
</table>
</div>
</div>
</body>
</html>
I am having trouble align the columns in my table with their table headings, the strange thing that is aligns in the Jsfiddle here with no problems: http://jsfiddle.net/m4HB3/68/
But in my application with the exact same code, it does no align the columns correctly with their headings: application
My question is what do I need to include in the application in order to fix this alignment issue in the application?
Below is code:
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No</th>
<th width="23%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="6%" class="noofanswers">Number of Answers</th>
<th width="7%" class="answer">Answer</th>
<th width="6%" class="noofreplies">Number of Replies</th>
<th width="6%" class="noofmarks">Number of Marks</th>
<th width="11%" class="image">Image</th>
<th width="11%" class="video">Video</th>
<th width="11%" class="audio">Audio</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">Question No.</td>
<td width="23%" class="question">Question</td>
<td width="7%" class="option">Option</td>
<td width="6%" class="noofanswers">Number of Answers</td>
<td width="7%" class="answer">Answer</td>
<td width="6%" class="noofreplies">Number of Replies</td>
<td width="6%" class="noofmarks">Number of Marks</td>
<td width="11%" class="image"><ul><li>Image</li></ul></td>
<td width="11%" class="video"><ul><li>Video</li></ul></td>
<td width="11%" class="audio"><ul><li>Audio</li></ul></td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableqanda_onthefly_container
{
max-height: 25px;
width: 100%;
overflow-y: scroll;
}
#tableqanda_onthefly
{
width:100%;
clear:both;
table-layout: fixed;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
word-wrap:break-word;
}
#tableqanda{
width:97%;
margin-left:0;
table-layout: fixed;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}
.imagetd{
font-size:75%;
}
.audiotd{
font-size:75%;
}
.videotd{
font-size:75%;
}
.qandaul{
list-style-type:square;
}
ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }
Your column widths don't add up to 100%; if you leave it to the browser to resolve this, you can't be certain that the alignment will match what you have in your head.
Change the widths to add up to 100% and you should be fine.