Whith the fiddle:
https://jsfiddle.net/nwcb1gwk/
When i apply float: left; display: block; to a <td>, the width of <td> is change (and the third block is outside).
I need to apply this for use overflow: hidden.
How i can do exactly the same size of the second table with float ?
.One {
float: left;
display: block;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
div {
width: 150px;
zoom: 400%;
background-color: yellow;
}
table {
border-spacing: 0;
}
<div>
<table>
<tr>
<td class='All One'>X</td>
<td class='All One'>X</td>
<td class='All One'>X</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td class='All'>X</td>
<td class='All'>X</td>
<td class='All'>X</td>
</tr>
</table>
</div>
Try to giving your table display:table and your td's display:table-cell and you dont need other codes. Here is all css i think you need;
table {
display: table;
}
.One {
display: table-cell;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
You can add this to class .One
box-sizing: border-box;
This will include your 1px outline in 50px of td's width. by default it is box-sizing: content-box; which means that width and border are separate.
I have prepare one solution for you ..
Try this one
<html>
<head>
<style>
.One {
float: left;
display: block;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
div {
width: 157px;
zoom: 400%;
background-color: yellow;
}
table {
border-spacing: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td class='All One'>X</td>
<td class='All One'>X</td>
<td class='All One' >X</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td class='All'>X</td>
<td class='All'>X</td>
<td class='All'>X</td>
</tr>
</table>
</div>
</body>
</html>
It will surely works for you.. Thank you
Related
I have a page which has other sub-tables inside one big table that divides the whole page into 2 parts. My question is how can I change position of all elements inside td tags in order to look it nice? The result I have now is here:
Current result with no position formatting
I want it to look like like this:
The way it's supposed to look
I've tried to do it with CSS formatting using relative position feature like this
.leftSide
{
position: relative;
bottom:250px;
}
And it works so well, but when I zoom in- zoom out this page in the browser it becomes a one big mess(elements by default in the middle of td tag, but then I do it, elements are out of the table). How can I avoid it?
My whole code below:
.splitTable {
width: 100%;
height: 100%;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
border-collapse: collapse;
width: 30%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
position: relative;
bottom: 250px;
}
.rightSide {
position: relative;
bottom: 250px;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest" width="25%">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
Hope, this helps :)
.splitTable {
width: 100%;
height: 100vh;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
position: relative;
width: 50%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
margin-top:30px;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
display: flex;
flex-direction:flex-end;
position: absolute;
top: 20px;
width:90%;
left:50%;
transform:translateX(-50%);
}
.leftSide>* {
flex: 1;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
margin: 5px;
border-collapse: collapse;
}
.rightSide {
position: absolute;
top: 20px;
left:50%;
transform:translateX(-50%);
width:90%;
}
.addButton {
float:right;
margin-right:5%;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
I have a table in which I have to separate a row using border as in image below.
As you can see, Border separator is having a space left-right side and not fully touched to table border.
I tried giving padding,margin but nothing worked.
tr {
border-bottom: 1px solid blue;
padding: 10px; // not working
margin: 10px; // not working
}
https://jsfiddle.net/alpeshprajapati/s934Lpbx/
What is the way to achieve this?
CSS
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
float: left;
border-bottom: 1px solid blue;
width: 90%;
margin: 0 10px;
}
td{
width: 32%;
float: left;
}
Try this:
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
// border-bottom: 1px solid blue;
}
td{
padding:5px 10px;
}
.border{
background:skyblue;
width:100%;
height:2px;
}
<table>
<thead>
<th>Th1</th>
<th>Th2</th>
<th>Th3</th>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
</tbody>
</table>
To increase the length of the border you have to increase the width of the div that is containing it.
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
I have a table which has another table inside it I need to style the main table but leave inner one as is. I tried to you the > selector in CSS however while styling the main table inner inherits everything the main has.
HTML
<table id="main-table">
<tbody>
<tr>
<td colspan="2">header</td>
</tr>
<tr>
<td>
<table id="inner-table">
<tbody>
<tr>
<td >data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS
#main-table > tbody tr td{
position: relative;
width: 300px;
height: 50px;
font-size: 15px;
background: #E6F4FF;
color: #035B9C;
padding: 10px;
box-sizing: border-box;
height: 60px;
border: 1px solid #E6F4FF;
}
Try this, using direct children > for each one.
#main-table > tbody > tr > td {
position: relative;
width: 300px;
height: 50px;
font-size: 15px;
background: #E6F4FF;
color: #035B9C;
padding: 10px;
box-sizing: border-box;
height: 60px;
border: 1px solid #E6F4FF;
}
/* demo purposes */
td {
color: red;
}
<table id="main-table">
<tbody>
<tr>
<td colspan="2">header</td>
</tr>
<tr>
<td>
<table id="inner-table">
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
correction:
#main-table > tbody > tr > td{
position: relative;
width: 300px;
height: 50px;
font-size: 15px;
background: #E6F4FF;
color: #035B9C;
padding: 10px;
box-sizing: border-box;
height: 60px;
border: 1px solid #E6F4FF;
}
I'm building in HTML three asymmetric tables like this:
<table id="d1">
<tr>
<th colspan="2">ATIS-GESTEL</th>
</tr>
<tr>
<td class="label">Petición:</td>
<td class="value">171601792</td>
</tr>
</table>
<table id="d2">
<tr>
<th colspan="2">FACILITADOR-SAC</th>
</tr>
<tr>
<td class="label">OT:</td>
<td class="value">171601792</td>
</tr>
</table>
<table id="d3">
<tr>
<th colspan="2">SAC</th>
</tr>
<tr>
<td class="label">Ticket:</td>
<td class="value"></td>
</tr>
</table>
I have to style some of the properties with CSS, including giving <td>'s with the class "value" a yellow background color. Well, the background color does change, but there's a little space there, like a border. It doesn't fill completely. Just in case, here's the CSS:
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#666666;
text-align:left;
}
td {
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#container {
width: 800px;
height: 600px;
border:1px solid #333333;
}
#header {
padding-left: 7px;
}
#d1 {
float: left;
margin-left: 15px;
margin-right: 15px;
border: 1px solid #333333;
}
#d1 tr td.value{
width: 100px;
height: 15px;
background-color: #FFFF66;
}
#d2 {
float: left;
margin-left: 15px;
margin-right: 15px;
border: 1px solid #333333;
width: 150px;
height: 40px;
}
#d2 tr td.value{
width: 100px;
Can someone tell me why it's that border appearing, and how to completely fill the cell?
Add border-collapse:collapse to the <table>'s styles.
Maybe the border spacing could be a problem too. Set it to zero.
table.mytable {
border-spacing: 0;
}