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;
}
Related
How can let the rows at the top (not at the bottom) with fixed tbody height of 500px!
html,body{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main{
margin: 10px;
padding: 10px;
}
table{
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr,th,td{
border: 1px solid;
padding: 3px;
text-align: center;
}
.minHeight{
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
I would clarify it as I get output like this:
But I want it to be like this:
Remove text-align:center on the td and add vertical-align:top
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main {
margin: 10px;
padding: 10px;
}
table {
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr {
border: 1px solid;
padding: 3px;
}
th,
td {
border: 1px solid;
padding: 3px;
vertical-align: top;
}
.minHeight {
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
You are not very descriptive on what you want but I'll give it a try.
I think you mean that you want the numbers on top of the list under the name and not in the center of it's entire box.
If so, then one simple solution is to add padding to the bottom of your first row of data (td). The padding should be equal to the height of your liking (warning: if you add more data you will need to adjust the padding).
I want to add a image beside the table so it shows a img.
I tried doing img float left, but it doesn't seem to work. If someone could put a value so it floats parallel or beside the table it would be great
My code is:
#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
<table id="toppings">
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
Thanks
This will work..
HTML : Image is wrapped in a div with id #imgdiv, Table is wrapped in another div #datadiv, And both of them wrapped in a #container div.
<div id="container">
<div id="imgdiv">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" width="100px"/>
</div>
<div id="datadiv">
<table>
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
</div>
</div>
CSS : Added styling for #imgdiv #datadiv #container.
#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
#imgdiv
{
float:left;
}
#datadiv
{
float:right
}
#container
{
display: inline-block
}
Since it is not mentioned anywhere, I am assuming that you have to align the image on the right of the table because float:left would work for aligning the image on the left of the table.
To align the image on the right of the table, use display:inline-block on both image and table. Additionally, you can also use vertical-align:top to align the top of the image with the top of the table.
Here is the complete code:
HTML Code
<table id="toppings">
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
<img className="testtableimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
CSS Code
#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
display:inline-block;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
.testtableimage{display:inline-block;vertical-align:top;width:200px;}
My goal is to add a bottom white line border under the heading in css as such shown in this picture table image. However the border is not appearing. I was watching and coding along a youtube tutorial on html and css. My results were fine until I reached the part where he added the bottom white line border tutorial video at 1hr34min45sec. When I placed the bottom border, it didn't appear.
Any help would be appreciated
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
In my case, the user-agent style was overriding my css class with border-collapse property. So I had to override it using
table {
border-collapse: collapse;
}
Try to run your code through those validators, specifically:
border-bottom: 1xp solid #F6F6F6; /* shows xp instead of px (pixels) */
https://validator.w3.org/ -- for HTML
https://jigsaw.w3.org/css-validator/ -- for CSS
Try targeting the tr of the thead so the border fills the full width of your table.
thead tr { border-bottom: 1px solid #FFF; }
Okay I checked out your css there are minor errors in it check out
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6; --- should be 1px not 1xp this one here was your main problem this is why the border didn't show up
padding 2px; ----- incorrect should be paddin: 2px;
text-align: center;s --- the s shouldn't be there
}
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
I want to have a table that has the layout of a left floated cell a right floated cell and the middle cell to stay in the center.
Example:
Problem: When the data inside the middle cell increases it moves more to the left thus decreasing the margin I want between the cells.
Example:
Code:
.settings {
/*background: #636969;*/
width: 750px;
margin: 0 auto;
padding: 1em;
}
.settings h4 {
padding: 1em 0;
letter-spacing: 1px;
border-bottom: 1px solid #cacece;
}
.settings table {
width: 100%;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: 200;
}
.settings tr {
border-bottom: 1px solid #cacece;
}
.settings td {
padding: 0.5em 0;
}
.settings .edit {
text-align: right;
}
<!-- start settings -->
<div class='settings'>
<h4>Account Settings</h4>
<table class='options'>
<tr>
<td class='name username'>Name</td>
<td class='value'>Robert Rocha</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name email'>Email</td>
<td class='value'>unitedstatesofamerica#gmail.com</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name pword' colspan='2'>Password</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
</table>
</div>
<!-- end settings -->
Fiddle
simply add table-layout:fixed to your table
.settings {
/*background: #636969;*/
width: 750px;
margin: 0 auto;
padding: 1em;
}
.settings h4 {
padding: 1em 0;
letter-spacing: 1px;
border-bottom: 1px solid #cacece;
}
.settings table {
width: 100%;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: 200;
table-layout: fixed;
}
.settings tr {
border-bottom: 1px solid #cacece;
}
.settings td {
padding: 0.5em 0;
}
.settings .edit {
text-align: right;
}
<div class='settings'>
<h4>Account Settings</h4>
<table class='options'>
<tr>
<td class='name username'>Name</td>
<td class='value'>Robert Rocha</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name email'>Email</td>
<td class='value'>unitedstatesofamerica#gmail.com</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name pword' colspan='2'>Password</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
</table>
</div>
you can set a fixed width for the first column:
.name { width: 100px; }
see here: https://jsfiddle.net/dojprwzL/
You've already done it for your edit column by doing so:
.settings .edit {
text-align: right;
}
This puts the content in your edit column straight to the right hand side. What you need to do is just to add the same rule for your other columns, obviously replacing right through left and center. That being said your styling would look somehow like this:
.settings .name {
text-align: left;
}
.settings .value {
text-align: center;
}
.settings .edit {
text-align: right;
}
A live example can be seen here.
Use
.settings table{table-layout:fixed;}
or
You can use width of each cell in percentages like
.settings td{word-wrap: break-word;}
td:first-child{width:30%;}
td:nth-child(2){width:40%;}
td:last-child{width:30%;}
Check Updated Fiddle
I've checked about 50 links in the past 20 minutes and tried every combination of stuff I can think of but there is still this massive automatic gap between my th elements, as seen in the picture below.
The test column will eventually be removed so that item has a colspan of 2, but in the mean time I cannot figure out how to remove this gap.
As you can see, item and test are very close, which is what I want. The rest are miles apart, and it's getting extremely annoying that I cannot solve this.
Picture: http://i.imgur.com/Herr27e.png
Markup & CSS:
Both generated from HAML and SCSS respectively.
<div class="ticker">
<h2>NEW LISTINGS</h2>
<div class="ticker-body">
<table id="new-listings">
<thead>
<tr>
<th>Item</th>
<th>test</th>
<th>Seller</th>
<th>Seller Wants</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-image">
<div class="item-image-container">
</div>
</td>
<td>Item Name</td>
<td>tsujp</td>
<td>Something Else Here</td>
</tr>
<tr>
<td class="item-image">
<div class="item-image-container">
</div>
</td>
<td>Item Name</td>
<td>tsujpdsds</td>
<td>Something Else Here</td>
</tr>
</tbody>
</table>
</div>
</div>
.ticker
{
.ticker-body
{
margin-top: 10px;
border: 1px solid $type25Border;
#include transition( border 0.2s ease-in-out );
&:hover
{
border: 1px solid $greenText;
}
}
}
table#new-listings
{
width: 645px;
color: $whiteText;
thead
{
font-family: "opensans-SB";
font-size: 14px;
th
{
padding-top: 15px;
padding-bottom: 8px;
}
}
th, td
{
text-align: left;
vertical-align: middle;
padding: 5px 10px 5px 10px;
}
tbody
{
tr
{
font-family: "opensans-R";
font-size: 12px;
//border-top: 1px solid $type35Border;
&:nth-child(odd) { background-color: $type60Background; }
&:nth-child(even) { background-color: $type70Background; }
.item-image
{
width: 45px;
height: 32px;
.item-image-container
{
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url( "src/hornmask.png" );
border: 1px solid $type35Border;
box-shadow: $softShadow;
}
}
}
}
}