I created this table:
table {
}
thead {
background-color: black;
color: white;
}
tbody, tr, td {
border: 1px solid black;
}
.cell-first-column {
width: 200px;
height: 70px;
}
.cell, th {
width: 100px;
height: 70px;
}
.td-cell {
height: 70px;
border: 1px solid black;
}
.chart {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0
}
.chart-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gold;
}
.cell-text {
z-index: 10;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Number</th>
</tr>
</thead>
<tr>
<td><div class="cell-first-column">Alfreds Futterkiste</div></td>
<td><div class="cell">Maria Anders</div></td>
<td><div class="cell">Germany</div></td>
<td><div class="cell">1234567</div></td>
</tr>
<tr>
<td><div class="cell-first-column">Centro comercial</div></td>
<td><div class="cell">Francisco Chang</div></td>
<td><div class="cell">Mexico</div></td>
<td><div class="cell">1234567</div></td>
</tr>
<tr>
<td><div class="cell-first-column">Opla</div></td>
<td class="td-cell">
<div class="chart">
<div class="chart-inner" style="height: 90%"></div>
<div class="cell-text">Charles Boule</div>
</div>
</td>
<td class="td-cell">
<div class="chart">
<div class="chart-inner" style="height: 30%"></div>
<div class="cell-text">France</div>
</div>
</td>
<td class="td-cell">
<div class="chart">
<div class="chart-inner" style="height: 50%"></div>
<div class="cell-text">1234567</div>
</div>
</td>
</tr>
</table>
inside the third row, the cells are colored and to do that I use absolute position.
It works but I don't understand why the yellow doesn't take the entire cell space, there is a white margin between the yellow and the cell border.
Margins are 0.
How it is now vs How I would like it to be:
Why? How can I solve?
Thanks a lot
Set padding of td to 0 should fix the issue.
The correct way:
<table cellpadding="0">
Related
I'm not sure what is this called, and already searched it on google but doesnt found what I want,
but here is what I want to looks like
Can someone help me to achieve this? or maybe what is this called?
and if there are only 1 content, then no border at all
and, I'm using div not table tag
It's taken from codepen but modified as per your requirements.
page.html
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
page.css
.cell {
border-collapse: collapse;
border: 1px solid #000;
padding: 5px;
}
.cell span{
background-color: #000;
color: #fff;
display: block;
padding: 10px;
}
.table {
border-collapse: collapse;
border-style: hidden;
}
.table-head > .row {
border-collapse: collapse;
border: 2px solid pink;
}
See the screenshot
http://prnt.sc/pdptlg
try checking out this example, it shows a table with inner borders only, without the outer borders.
.cell {
border-collapse: collapse;
border: 1px solid pink;
padding: 5px 10px;
}
.table {
border-collapse: collapse;
border-style: hidden;
}
.table-head > .row {
border-collapse: collapse;
border: 2px solid pink;
}
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
</tbody>
</table>
Taken from https://codepen.io/sirinity/pen/dDsLx
One way only using pure css. Hope this help
.container {
display: flex;
flex-wrap: wrap;
width: 150px;
}
.wrapper {
width: 50px;
height: 50px;
padding: 5px;
border: 0 solid;
}
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
background-color: #030;
}
.wrapper:nth-of-type(odd) {
border-right-width: 1px;
}
.wrapper:nth-of-type(odd), .wrapper:nth-of-type(even) {
border-bottom-width: 1px;
}
.wrapper:last-child, .wrapper:nth-last-of-type(-n+2):not(:nth-child(even)) {
border-bottom-width: 0;
}
<div class="container">
<div class="wrapper"><div class="content">1</div></div>
<div class="wrapper"><div class="content">2</div></div>
<div class="wrapper"><div class="content">3</div></div>
<div class="wrapper"><div class="content">4</div></div>
<div class="wrapper"><div class="content">5</div></div>
<div class="wrapper"><div class="content">6</div></div>
<div class="wrapper"><div class="content">7</div></div>
</div>
You can do it with css pseudo-classes
More info here: Css pseudo-classes
Yout HTML dosnt change:
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
</tbody>
</table>
in css:
.table {
border-collapse: collapse;
border-style: hidden;
}
.cell {
padding: 5px 10px;
}
.row:nth-of-type(1n+1) {
border-bottom: 2px solid pink;
}
.cell:nth-of-type(2n-1) {
border-right: 2px solid pink;
}
Explanation:
Just skip first row to set top border:
.row:nth-of-type(1n+1) {
border-bottom: 2px solid pink;
}
and then, set border only to odd cells:
.cell:nth-of-type(2n-1) {
border-right: 2px solid pink;
}
Code here
Hope it helps you.
Edit: Sorry but i didnt notice that you are not using table tags, Hải Bùi response is the way for that, my css only works properly with tables.
I want to put two images on the left and a table on the right. At the moment I have one picture on the left, a table on the right and a blank space in the place where I want my another <img>. When I try to put my second <img> it remains on the left but under the table as it is 2x longer than the first image. Here's my code:
th { color: white; padding: 10px; }
td { color: white; padding: 10px; border-bottom: 1px solid aqua; }
tr { opacity: 0.8; }
tr:hover {background-color: #72FFBB;}
#td {
opacity: 0.2;
}
.table{
height: 654px;
float: left;
width: 55%;
border: 2px solid aqua;
text-align:center;
}
<!-- first picture -->
<div> <img id="VY_Canis_Majoris_vs_sun" src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;"> </div>
<!-- the one that should be under the first picture, but it is next to it -->
<div> <img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>
<div class="table"> <table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table> </div>
Enclose the two pictures in one div
<div class="myimg">
<!-- first picture -->
<img id="VY_Canis_Majoris_vs_sun" src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;">
<!-- the one that should be under the first picture, but it is next to it -->
<img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>
<div class="table"> <table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table> </div>
then add this css
.myimg{
float: left;
width: 44%;
}
give float:left to both image div tag.
th { color: white; padding: 10px; }
td { color: white; padding: 10px; border-bottom: 1px solid aqua; }
tr { opacity: 0.8; }
tr:hover {background-color: #72FFBB;}
.d1{
float:left;
height:100px;
width:100px;
}
#td {
opacity: 0.2;
}
.table{
height: 654px;
float: left;
width: 55%;
border: 2px solid aqua;
text-align:center;
}
<!-- first picture -->
<div class="d1"> <img id="VY_Canis_Majoris_vs_sun" src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;"> </div>
<!-- the one that should be under the first picture, but it is next to it -->
<div class="d1"> <img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>
<div class="table"> <table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table> </div>
Maybe what you are looking for:
.container,
.images-container {
display: flex;
}
.container {
flex-direction: row;
}
.images-container,.table-container {
width:50%;
}
.images-container {
flex-direction: column;
}
.images-container img{
max-width:100%;
height:200px;
object-fit:cover;
}
/* Table styling */
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
<div class='container'>
<div class='images-container'>
<img src="http://ste.india.com/sites/default/files/2016/12/30/559004-301216-gs-tch-10.jpg" />
<img src="http://www.dailypioneer.com/uploads/main/mn_story_image/T330_158723_Untitled-2.gif" />
</div>
<div class='table-container'>
<table id='t01' style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
</div>
You can group your images into 1 div and float this to the left.
<div id="pictures">
<img id="VY_Canis_Majoris_vs_sun" src="https://picsum.photos/400/400">
<img id="VY_Canis_Majoris_vs_sun" src="https://picsum.photos/400/400?image=42">
</div>
In your css you can give this div a width of 50% (and float it)
#pictures {
width: 50%;
float: left;
}
If you want your pictures under each other you can put display block on the images and make them fill the space (width: 100%)
#pictures img {
display: block;
width: 100%;
height: auto;
}
You put a border on your table so to make it fit you can put the width on 50% - 4px (2px border on each side). Use calc (short for calculate) for this:
.table {
width: calc(50% - 4px);
...
}
Here you can find all the code together: https://jsbin.com/rejuburaka/edit?html,css,output
Try This:
th {
color: white; padding: 10px;
}
td {
color: white;
padding: 10px;
border-bottom: 1px solid aqua;
}
tr {
opacity: 0.8;
}
tr:hover {
background-color: #72FFBB;
}
#td {
opacity: 0.2;
}
.table{
height: 654px;
float: left;
width: 55%;
border: 2px solid aqua;
text-align:center;
}
.wrapper {
float: left;
width: 30%;
}
div img {
width: 100%;
margin-bottom: 5px;
}
.table {
float: right;
width: 65%;
}
<div class="wrapper">
<div>
<img id="VY_Canis_Majoris_vs_sun" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" width="44%" height="50%">
</div>
<div>
<img id="VY_Canis_Majoris_vs_sun" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA" width="44%" height="50%" style="z-index: -1;">
</div>
</div>
<div class="table">
<table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table>
</div>
I think you can't use <img /> tag under another <img /> tag because <img /> is a single line html tag. You can do something like this
<style>
.full-div{
width: 100%;
height: auto;
margin: 0 auto;
}
.left-side{
width: 100%;
height: auto;
margin: 0 auto;
}
.first-div,.second-div,.third-div{
width: 33%;
height: auto;
margin: 0 auto;
}
</style>
<div class="full-div">
<div class="left-side">
<div class="first-div">
<img src="your image source" />
</div>
<div class="second-div">
<img src="your image source" />
</div>
<div class="third-div">
<img src="your image source" />
</div>
</div>
<div class="right-side">
your table here
</div>
</div>
I have a table that looks like this:
And every row has a hidden details field:
So I want to remove border spacing from row and its details row.. How can I do that?
this is my HTML:
<table class="table message-table">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Action</th>
<th></th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let message of messages | paginate: config">
<tr>
<td>{{message.title}}</td>
<td>{{message.created | date:'longDate'}}</td>
<td (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td>
<td></td>
</tr>
<tr id="collapseExample" [ngbCollapse]="message.collapsed">
<td>{{message.text}}</td>
<td colspan="3"></td>
</tr>
</ng-container>
</tbody>
</table>
and this is my SCSS:
.messages {
background-color: $color-background-main;
min-height: 17rem;
overflow-x: auto;
padding-top: 2rem;
.message-table {
border-collapse: separate;
border-spacing: 0 0.4rem;
thead {
th {
border: none;
font-size: 0.6rem;
color: #9b9b9b;
text-transform: uppercase;
padding-top: 0;
padding-bottom: 0;
&:first-child {
width: 70%;
padding-left: 1rem;
}
}
}
}
tbody {
tr {
box-shadow: $main-shadow;
background-color: white;
&.selected {
box-shadow: $shadow-selected;
}
td:first-child {
padding-left: 1rem;
}
}
td {
background-color: white;
border: none;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
height: 2.5rem;
vertical-align: middle;
table-layout: fixed;
&:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding-right: 0;
width: 2rem;
}
}
}
}
How can I fix this? I've tried making tr a top border but nothing happened... What are other solutions for my problem?
UPDATE 1
Adding codepen of a simple example : https://codepen.io/anon/pen/prxgOe
UPDATE 2
I want to remove spacing between title and details tr elements ONLY!
Here is a quick fix using borders.
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
}
.title {
border-top: 5px solid #fff;
}
.details {
/* display: none; */
}
<table>
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="title">
<td>title1</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text1</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title2</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text2</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title3</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text3</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
I think you want like this
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
display: table-row;
}
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
display: table-row;
}
.title:first-child {
border-top: 7px solid #fff;
}
.title {
border-top: 12px solid #fff;
}
tbody tr:nth-child(2n) {
position: relative;
}
tbody tr:nth-child(2n)::after {
bottom: 0;
box-shadow: 0 2px 2px 0 #ebebeb;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
width: 100%;
}
<table>
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="title">
<td>title1</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text1</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title2</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text2</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title3</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text3</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
*ngFor has an option to detect odd and even rows:
<div *ngFor="let message of messages; let odd=odd; let even=even>..</div>
then you can use odd or even values to set style/class as so:
<div [class.evenClass]="event" [class.oddClass]="odd">...</div>
and in the stylesheet, define .evenClass and .oddClass style as needed.
P.S.You have a table layout, you need to adapt above to your case
#hunzaboy and #ankitapatel answers were kind of good for me, but eventually I came with different solution which is probably not the best one, but it works like a charm... It does not break the ui scalability or anything else...
So I just added div elements in each of td elements so my HTML now looks like this:
<tbody>
<ng-container *ngFor="let message of messages | paginate: config">
<tr>
<td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.title}}</td>
<td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.created | date:'longDate'}}</td>
<td class="details-button" (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td>
<td></td>
</tr>
<tr id="collapseExample" [ngbCollapse]="message.collapsed">
<td>
<div class="text-container">{{message.text}}</div>
</td>
<td colspan="3">
<div class="empty-container"></div>
</td>
</tr>
</ng-container>
</tbody>
and then I added this SCSS to my file:
#collapseExample {
td {
padding: 0;
}
.text-container {
background-color: #fff;
margin-top: -23px;
padding-left: 1rem;
border-radius: 0.2rem;
height: 100%;
padding-bottom: 1rem;
}
.empty-container {
background-color: #fff;
height: 100%;
margin-top: -20px;
width: 100%;
}
}
I intend to do this:
Left Side Column ---> Frozen
Right Side Column ---> Scrollable
The problem that I'm facing currently is that only <td> part is getting frozen. and the <th> has no effect of the code. I couldn't figure out how to get this fixed? Any help would be much appreciated.
Thanks in advance.
HTML code:
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table" >
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long"><h3>Sheet</h3></th>
<th class="header"><h3>Part Type</h3></th>
<th class="header"><h3>Options</h3></th>
<th class="header"><h3>Customer</h3></th>
<th class="header"><h3>Code</h3></th>
<th class="header"><h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol"><h3>ABC01</h3></td>
<td class="row-content"><h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>
CSS code:
.padding-right-5 {
padding-right: px;
}
.max_width_300 {
max_width : 300px;
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
Added few fixes. Hope this will get you started.
.padding-right-5 {
padding-right: 5px;
}
.max_width_300 {
max-width : 300px;
}
.long{
position: absolute; /* added this */
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
background: #fff; /*added this */
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table">
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long">
<h3>Sheet</h3></th>
<th class="header">
<h3>Part Type</h3></th>
<th class="header">
<h3>Options</h3></th>
<th class="header">
<h3>Customer</h3></th>
<th class="header">
<h3>Code</h3></th>
<th class="header">
<h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol">
<h3>ABC01</h3></td>
<td class="row-content">
<h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>
I have read many post on SO about this, e.g. TD column width value not working with fixed table-layout td widths, not working? etc. But still when I give width to td it doesn't get that width. Here is a working example of the problem:
div {
width: 400px;
padding: 5px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
border: 1px dotted green;
}
td {
word-break: break-all;
}
td:nth-of-type(1) {
width: 50px;
}
td:nth-of-type(2) {
width: 150px;
}
<div style="width: 400px;">
<table style="table-layout: fixed; width: 100%;">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="">
The_first_line
</td>
<td class="">
The_second_but_a_long_line_with_so_many_characters
</td>
<td class="">
<ul class="">
<li class="">The simple
</li>
</ul>
</td>
<td>
last
</td>
</tr>
</tbody>
</table>
</div>
The first td should have taken 50px and the second should have taken 150px, but this is not happening. Why?
Your pseudo :second-of-type is invalid. Try :nth-of-type() instead:
td:nth-of-type(2) {
width: 150px;
}
However this isn't a very robust way of targetting your element. What if you have multiple tables on your page. It might be a good idea to add a class to your table:
<table class="my-table">
And then target specific for that table:
.my-table td:nth-of-type(2) { .. }
There is no such selector like second-of-type you can use nth-child(2) instead. and you should apply style to th while you are using thead The below solution gives you the desired result
div {
width: 400px;
padding: 5px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
border: 1px dotted green;
}
td {
word-break: break-all;
}
th:first-of-type {
width: 50px;
}
th:nth-child(2) {
width: 150px;
}
<div style="width: 400px;">
<table style="table-layout: fixed; width: 100%;">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="">
The_first_line
</td>
<td class="">
The_second_but_a_long_line_with_so_many_characters
</td>
<td class="">
<ul class="">
<li class="">The simple
</li>
</ul>
</td>
<td>
last
</td>
</tr>
</tbody>
</table>
</div>
Try to fix width for th instead of td like this: Demo
tr th:first-child {
width: 50px;
}
tr th:nth-child(2) {
width: 150px;
}
You are just setting the width on the td elements, the th are causing the problem. Set the width on both and it will work:
td:nth-of-type(1) {
width: 50px;
}
th:nth-of-type(1) {
width: 50px;
}
tdnth-of-type(2) {
width: 150px;
}
th:nth-of-type(2) {
width: 150px;
}
Example:
https://www.w3schools.com/code/tryit.asp?filename=FEAXCBFALXN2