Controlling The Massive Spacing Between TH Elements - html

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;
}
}
}
}
}

Related

I can't change row's background color in table

I can't change rows' background-color; I'd like to have one row red.
Here is my code:
table.cennik-table {
font-size: 20px;
border: 3px solid #555555;
width: 80%;
height: auto;
text-align: center;
border-collapse: collapse;
margin: 0 auto;
}
table.cennik-table th {
font-size: 22px;
background-color: #888888;
}
table.cennik-table td {
padding: 0.7rem;
}
table.cennik-table tr.rowB {
background-color: red;
}
<div>
<table class="cennik-table">
<tr>
<th>Ilość wejść</th>
<th>Zajęcia grupowe</th>
<th>Treningi personalne</th>
</tr>
<tr class="rowB">
<td>1x tydzień</td>
<td>20zł</td>
<td rowspan="4">50zł</td>
</tr>
<tr class="rowA">
<td>2x tydzień</td>
<td>60zł</td>
</tr>
<tr class="rowB">
<td>3x tydzień</td>
<td>110zł</td>
</tr>
<tr class="rowA">
<td>OPEN</td>
<td>160zł</td>
</tr>
</table>
</div>
I'm a beginner so I could have made some simple mistakes.

Table is not scrollable

I coded a table and this table has so much information in it that if the page is on 100% more than half of the table is missing.
I hope you can help me. You have to add more of the table cells to recreate it.
body {
min-height: 100vh;
background-color: var(--body-color);
transition: var(--tran-05);
background-color: #18191a;
--body-color: #18191a;
--sidebar-color: #242526;
--primary-color: #3a3b3c;
--primary-color-light: #3a3b3c;
--toggle-color: #fff;
--text-color: #ccc;
}
table.content {
border-collapse: collapse;
margin: auto;
min-width: 400px;
border-radius: 5px 5px 0 0;
justify-content: center;
width: 75%;
padding: 2%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #201f1b;
}
table.content thead tr {
background-color: #403f46;
color: white;
font-weight: bold;
text-align: left;
}
table.content th,
table.content td {
padding: 12px 16px;
}
table.content tbody tr {
border-bottom: 1px solid #ccc;
}
table.content tbody tr:last-of-type {
border-bottom: 2px solid #403f46;
}
table.content tbody tr.active {
font-weight: bold;
color: #403f46;
}
<table class="content">
<thead>
<tr>
<th>ServerID</th>
<th>Server Owner</th>
<th>Premium Server</th>
<th>Dev Server</th>
</tr>
</thead>
<tbody>
<tr>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
</tr>
</tbody>
</table>
The problem is because of this:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
it calculates -50% on the y-axis, which results in a cut. This works fine, but not for long elements.
Instead of this, just using a div as a wrapper around the table.
Update your code like the following:
Html:
<div class="wrapper">
<table class="content">
<thead>
<tr>
<th>ServerID</th>
<th>Server Owner</th>
<th>Premium Server</th>
<th>Dev Server</th>
</tr>
</thead>
<tbody>
<tr>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
</tr>
</tbody>
</table>
</div>
css:
div.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
table.content {
border-collapse: collapse;
margin: auto;
min-width: 400px;
border-radius: 5px 5px 0 0;
width: 75%;
padding: 2%;
color: #f9f9f9;
}
now it should work correctly.

How to create Responsive HTML, CSS table?

I want to create a responsive table only with HTML & CSS that has a icon button aligned to right side when on responsive view as similar to the bellow image. The bellow code renders a responsive table, however the icon is also aligned on the next line. I want it to be aligned on right side as in image. any one Please help on this.
table {
border: 1px solid #ccc;
border-radius: 5px;
/* border-collapse: collapse; */
margin: 0;
padding: 0;
width: 50%;
table-layout: fixed;
}
table tr {
background-color: white;
border: 1px solid #ddd;
padding: 10px;
}
table th,
table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table th {
font-size: 15px;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
width: 100%
}
table thead {
border: none;
/* clip: rect(0 0 0 0); */
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 1px solid #ddd;
display: block;
/* margin-bottom: .625em; */
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: 13px;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Upload Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
</tbody>
</table>

CSS table border-bottom not showing

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>

Fill table cell with color

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;
}