td adding extra margin or padding to right of element - html

On an assignment for my teacher, we are making a table in which I want each td element to be 200px wide for a total of 5 cells which equal to 1000px (wrapper). When I do this however, the last td in each tr jumps down to the next line when they should all line up properly with no issues.
EDIT: Solved! (Read comments)
Here is my code for the table:
<table id="assignment-table">
<tr>
<th>Assignment</th>
<th>Fall 2013</th>
<th>Responsive?</th>
<th>Winter 2014</th>
<th>Responsive?</th>
</tr>
<tr>
<td>A1</td>
<td>Code Provided Site</td>
<td>No</td>
<td>Designasaurus</td>
<td>Yes</td>
</tr>
<tr>
<td>A2a</td>
<td>Restaurant Mock-up</td>
<td>N/a</td>
<td>TBA</td>
<td>-</td>
</tr>
<tr>
<td>A2b</td>
<td>Restaurant Static</td>
<td>No</td>
<td>TBA</td>
<td>-</td>
</tr>
<tr>
<td>A3a</td>
<td>Adaptive Excercise</td>
<td>No</td>
<td>TBA</td>
<td>-</td>
</tr>
<tr>
<td>A3b</td>
<td>Responsive Excercise</td>
<td>Yes</td>
<td>TBA</td>
<td>-</td>
</tr>
<tr>
<td>A4</td>
<td>Restaurant Final</td>
<td>Yes</td>
<td>TBA</td>
<td>-</td>
</tr>
<tr>
<td>A5a</td>
<td>Final Mock-up</td>
<td>N/a</td>
<td>TBA</td>
<td>-</td>
</tr>
<tr>
<td>A5b</td>
<td>Final Site</td>
<td>Yes</td>
<td>TBA</td>
<td>-</td>
</tr>
<tr>
<td class="lastrow">NSCC GRAPHIC DESIGN | 2012-14</td>
</tr>
</table>
</div>
And then the CSS:
#content {
width: 100%;
color: white;
}
#assignment-table {
font-size: 16px;
border-spacing: 0!important;
border-collapse: collapse;
}
#assignment-table th {
display: inline-block;
padding: 25px 0;
width: 200px;
text-align: center;
}
#assignment-table tr {
display: block;
border-bottom: 1px solid #ffffff;
}
#assignment-table tr:last-child {
width: 1000px;
border-bottom: none!important;
}
#assignment-table td {
display: inline-block;
padding: 25px 0;
width: 200px;
text-align: center;
}
.lastrow {
width: 1000px!important;
}
th:nth-child(3) {
background-color: rgba(255,255,255,0.05);
}
td:nth-child(3) {
background-color: rgba(255,255,255,0.05);
font-family: 'source_sans_proitalic';
}
th:nth-child(5) {
background-color: rgba(255,255,255,0.05);
}
td:nth-child(5) {
background-color: rgba(255,255,255,0.05);
font-family: 'source_sans_proitalic';
}
It should look like this:

It looks like you have display: inline-block; on your table cells. inline-block will automatically insert a space between elements. It's this space that is adding up and wrapping your last element. I would remove the display: inline-block; from your css entries, since this is a table it doesn't need it anyway.
CSS:
#assignment-table th {
//display: inline-block; <- remove this
padding: 25px 0;
width: 200px;
text-align: center;
}
#assignment-table td {
//display: inline-block; <- remove this
padding: 25px 0;
width: 200px;
text-align: center;
}
EXAMPLE FIDDLE

You are removing the default table behavior by using display: inline-block on tds. Just apply width: 1000px to the table and td { width: 20%; }
EDIT: here you go.

Related

Center TH within table

Trying to centre a <TH> element within a table that is spanning two columns. Whatever I try, the <TD> doesn't move.
td {
text-align: left;
padding: 5px;
}
table {
text-align: center;
}
.contacttable {
margin-left: auto;
margin-right: auto;
background-color: #FCF0F2;
border-style: solid;
border-color: grey;
padding: 10px;
font-size: 16px;
display: inline-block;
width: auto;
}
th {
text-align: center;
}
<table class="contacttable">
<tr colspan="2">
<th id="tablehead">Contact Me</th>
</tr>
<tr>
<td>Email</td>
<td>Email Address Here </td>
</tr>
<tr>
<td>Telephone</td>
<td>Telephone Number Here</td>
</tr>
</table>
I would like the 'Contact Me' TH to be centred over the two columns below?
Screenshot of Table
Use colspan="2" as an attribute for that th (instead of tr) to make it span both columns:
td {
text-align: left;
padding: 5px;
}
table {
text-align: center;
}
.contacttable {
margin-left: auto;
margin-right: auto;
background-color: #FCF0F2;
border-style: solid;
border-color: grey;
padding: 10px;
font-size: 16px;
display: inline-block;
width: auto;
}
th {
text-align: center;
}
<table class="contacttable">
<tr>
<th id="tablehead" colspan="2">Contact Me</th>
</tr>
<tr>
<td>Email</td>
<td>Email Address Here </td>
</tr>
<tr>
<td>Telephone</td>
<td>Telephone Number Here</td>
</tr>
</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>

Setting table height appears to adds margin-top instead

I'm trying to make a scrollable table, with the table height set. However, when I try to set the height, it adds a margin on top of the table instead of adjusting the height of the actual table.
I want only the table to scroll (Not the date above it) and eventually hope to make the column titles sticky.
You can see what I'm talking about here: http://jsfiddle.net/m5s87hb0/
This is my html:
<div class='box-style-1' id='timesheet-box'>
<span class='box-title'>Time Sheet<span>
<div id='table-wrapper'>
<table id='timesheet'>
<thead>
<th id='timesheet-date' colspan="5">00/00/0000 - 00/00/0000</th>
</thead>
<div id='table-scroll'>
<tbody>
<tr id='col-titles'>
<th>Jobs</th>
<th>Task</th>
<th>In</th>
<th>Out</th>
<th>Hours</th>
</tr>
<tr>
<td>Job 1</td>
<td>Task 1</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 2</td>
<td>Task 2</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 3</td>
<td>Task 3</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 4</td>
<td>Task 4</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 5</td>
<td>Task 5</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
</tbody>
</div>
</table>
</div>
</div>
Css:
.box-style-1 {
clear: both;
position: absolute;
display: block;
border: 1px solid black;
border-radius: 10px;
white-space: nowrap;
background: #D1D3D4;
overflow: hidden;
}
.box-title {
display: block;
background: #D15F32;
padding: 0px;
border-radius: 10px 10px 0px 0px;
text-align: center;
font-weight: ;
color: #fff;
font-size: 25px;
margin-bottom: 0px;
height: 40px;
padding-top: 10px;
}
#timesheet-box {
width: 78%;
height: 300px;
position: absolute;
display: block;
margin-left: 7%;
}
#table-wrapper {
position: relative;
height: 250px;
}
#timesheet {
width: 100%;
margin-top: 10px;
color: #3a3a3c;
height: 100%;
}
#timesheet-date {
padding: 0px;
margin-top: 50px;
}
#table-scroll {
position: relative;
display: block;
height: 100px;
overflow: scroll;
}
tbody {
}
th, td {
border: 1px solid #3a3a3c;
font-style: normal;
font-size: 22px;
height: 40px;
}
table {
border-collapse: collapse;
}
You can't have the div around tbody, move it around the table and your table will scroll
<div id='table-scroll'>
<table id='timesheet'>
...
</table>
</div>
edit
http://codepen.io/anon/pen/VLmqbK
To fix the header, you must add a position absolute to the header and fix its height. The rest of your table will go up so add a padding-top to the around div for this height value to fix it. Also add a background to hide scrolled content below.
thead {
position:absolute;
top:0px;
height:40px;
background:white;
}
#table-scroll {
display: block;
height: 200px;
overflow-y: scroll;
padding-top:23px; /* I don't know where the 17 other px come from in your code but who cares :) */
}
I solved the problem by moving the date out of the table.

Table with rounded borders and borders between rows

I'm trying to make a full width table that has rounded corners, a border around the entire table, and a border under each table row (except the last one, don't want to double up...).
My sample: http://jsfiddle.net/7xD64/13/
My code:
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
table {
overflow: hidden;
border-radius: 10px;
background-color: white;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
width: 100%
}
tr {
border-bottom: 1px solid black;
}
This works perfectly in Chrome, but is broken in Safari (there is no outer border). If I remove the overflow: hidden it renders the outer border, but the table doesn't have rounded edges.
I've found a few solutions, but they don't seem to work on tables (or, as is likely, I'm not implementing them properly).
Question: Is it possible to make a table that has the following and works in Chrome, Safari and IE(8+)?
border around the entire table
rounded edges (with border) for the table
borders at the bottom of each table row
table is full width
If is is possible, could you please update my fiddle / code to explain how it works? (I'm still getting started with CSS, and I get pretty confused about where to put the rules.)
Thanks!
Your Updated jsFiddle Table Your Table
General table Bordered Table
HTML
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
CSS
table {
max-width: 100%;
width: 100%;
background-color: transparent;
margin-bottom: 20px;
border-spacing: 0;
border:1px solid #ddd;
border-radius:15px;
overflow:hidden;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
Create one div outside of your table and apply the border radius. Also use last-child property to remove the border for the last items.
CSS:
#mytable{
border-radius: 10px;
background-color: white;
border: 1px solid black;
}
.mytable {
border-collapse: collapse;
border-spacing: 0;
}
.mytable tr td {
border-bottom: 1px solid black;
}
.mytable tr:last-child td {
border-bottom: 0px solid black;
}
HTML
<div id="mytable">
<table class="mytable" width="100%">
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
DEMO
Try following code for rounded border and it should work in all browsers
table {
overflow: hidden;
border-radius: 10px;
background-color: white;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}

Table with sticky column - Issue with cell size

I have a table that can slide left or right when the screen is narrow enough. The first column is positioned absolute so that it is always visible.
Is it possible to make the cells in the first column maintain the size of the cells in the other columns? I am not sure how to achieve this while keeping the first column frozen.
Here is a fiddle to my code: http://jsfiddle.net/ta945/
Here's the HTML and CSS
HTML:
<div>
<table>
<thead>
<tr>
<th class="sticky">Name</th>
<th>Helpful Services</th>
<th>State</th>
<th>City</th>
<th>Phone</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">First Name</td>
<td>Math</td>
<td>CO</td>
<td>San Francisco</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Second Name</td>
<td>Reading</td>
<td>NY</td>
<td>New York City</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Third Name</td>
<td>Art</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Four Name</td>
<td>Programming</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
width: 100%;
border: 1px solid #000000;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: seperate;
border-spacing: 0;
margin-left: 5em;
}
thead, tbody, tr {
vertical-align: middle;
}
th {
font-weight: bold;
padding: 2px 4px;
background-color: #676767;
color: #FFFFFF
}
td {
padding: 2px 4px;
}
tbody tr:nth-child(even) td {
background-color: #cccccc;
}
.sticky {
position: absolute;
left: 0;
top: auto;
margin-left: 9px;
}