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>
Related
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.
I have a screenshot below which I have replicated in HTML & CSS.
I have created the fiddle for the above screenshot. I have used Bootstrap 4 in order to make the table.
The snippets of HTML and CSS codes which I have used in order to make the rows are:
HTML:
<div class="body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="number">Number</th>
<th scope="col" class="table2">Table</th>
<th scope="col" class="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Eve Doe</td>
<td class="number1">250</td>
<td class="table1">4</td>
<td class="right-itemsreceived">Items Received</td>
</tr>
<tr>
<td class="left">Fred Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemsreceived">Items Received</td>
</tr>
<tr>
<td class="left">Fred Doe's Guest 1</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemswaiting"> Items Waiting</td>
</tr>
<tr>
<td class="left">Jack Doe</td>
<td class="number1">14</td>
<td class="table1">4</td>
<td class="right-unpaid">Unpaid</td>
</tr>
</tbody>
</table>
</div>
CSS:
.table td,
.table th {
border-top: none! important;
padding-left: 3%;
}
.table thead th {
border-bottom: none! important;
}
.table td.left {
padding-right: 32%;
}
.body-manage-attendees tbody tr:hover {
background-color: #EDEDED;
}
.body-manage-attendees .number {
padding-left: 2%;
padding-right: 6%;
}
.body-manage-attendees .table1 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .table2 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .status {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right-bill {
padding-left: 1%;
color: white;
text-align: center;
background-color: #1173B7;
}
.body-manage-attendees .right-nobill {
padding-left: 1%;
text-align: center;
color: black;
}
Problem Statement:
I am wondering what changes do I need to make in the CSS codes above so that square box (marked with arrow in the screen-shot above) shows up inside the colored rectangle.
Please refer to this Fiddle
I have added some CSS rules and updated your HTML structure for the colored rectangles.
// General CSS
.nav-top-searchbar {
position: relative;
}
#ellipsis {
top: 12px;
position: absolute;
right: 43px;
cursor: pointer;
}
#ellipsis:focus {
outline: none;
}
#ellipsis:focus+.dropdown {
display: block;
}
input[type=text] {
width: 100%;
background: #10314c;
}
.dropdown {
background-color: #FFFFFF;
display: none;
/* padding-left: 2%; */
position: absolute;
/* height: 150px; */
right: 0;
width: 200px;
z-index: 10;
list-style-type: none;
padding-top: 25px;
padding-bottom: 25px;
box-shadow: 0 0 15px #888;
top: 2px;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
border: 1px solid #FFFFFF;
z-index: 2;
padding: 3px;
}
.table td,
.table th {
border-top: none! important;
padding-left: 3%;
}
.table thead th {
border-bottom: none! important;
}
.table td.left {
padding-right: 32%;
}
.dropdown a {
color: #676767;
font-weight: bold;
font-size: 14px;
}
.dropdown li {
padding-left: 20px;
}
.dropdown li:hover {
background-color: #EDEDED;
}
.body-manage-attendees tbody tr:hover {
background-color: #EDEDED;
}
.body-manage-attendees .number {
padding-left: 2%;
padding-right: 6%;
}
.body-manage-attendees .table1 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .table2 {
padding-left: 1%;
text-align: center;
padding-right: 6%;
}
.body-manage-attendees .status {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right {
padding-left: 1%;
text-align: center;
}
.body-manage-attendees .right-bill {
padding-left: 1%;
color: white;
text-align: center;
background-color: #1173B7;
}
.body-manage-attendees .right-nobill {
padding-left: 1%;
text-align: center;
color: black;
}
.body-manage-attendees .right-unapid {
padding-left: 1%;
color: white;
text-align: center;
background-color: #1173B7;
}
.body-manage-attendees .right-itemsreceived {
padding-left: 1%;
color: white;
text-align: center;
background-color: #10314C;
}
.body-manage-attendees .right-itemswaiting {
padding-left: 1%;
text-align: center;
color: white;
background-color: #10314C;
}
.body-manage-attendees .right-unpaid {
padding-left: 1%;
color: white;
background-color: #1173B7;
text-align: center;
}
.nav-top-bar {
display: flex;
justify-content: space-between;
padding: 0% 2.5%;
background: rgb(16, 49, 76);
align-items: center;
}
.square {
display: inline-block;
border-radius: 5px;
border: 1px solid white;
height: 15px;
width: 15px;
vertical-align: middle;
}
.right-itemsreceived span{
vertical-align: middle;
padding-left: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="number">Number</th>
<th scope="col" class="table2">Table</th>
<th scope="col" class="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Eve Doe</td>
<td class="number1">250</td>
<td class="table1">4</td>
<td class="right-itemsreceived">Items Received</td>
</tr>
<tr>
<td class="left">Fred Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemsreceived"><div class="square"></div><span>Items Received</span></td>
</tr>
<tr>
<td class="left">Fred Doe's Guest 1</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemswaiting"> Items Waiting</td>
</tr>
<tr>
<td class="left">Jack Doe</td>
<td class="number1">14</td>
<td class="table1">4</td>
<td class="right-unpaid">Unpaid</td>
</tr>
</tbody>
</table>
</div>
.body-manage-attendees .right-itemsreceived::before {
content: url(image.jpg); /* Insert content image here*/
padding-right: 8px;
color: red;
}
Well you can start of by using the div Function
So here is a Exemple
.square {
width: 50%;
background: #000;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
<div class="square">
</div>
So Here is a Exemple
and now with your Code : You can see Here on JSFIDDLE
ofc you can play around with the code and add boostrap this is just to get you started
<div class="body-manage-attendees">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="number">Number</th>
<th scope="col" class="table2">Table</enter code hereth>
<th scope="col" class="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Eve Doe</td>
<td class="number1">250</td>
<td class="table1">4</td>
<td class="right-itemsreceived">
<input type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>
</tr>
<tr>
<td class="left">Fred Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemsreceived">
<input class="right-itemsreceived" type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>
</tr>
<tr>
<td class="left">Fred Doe's Guest 1</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-itemswaiting"><input type ="checkbox"/><span style="padding-left:15px"> Items Waiting</td>
</tr>
<tr>
<td class="left">Jack Doe</td>
<td class="number1">14</td>
<td class="table1">4</td>
<td class="right-unpaid"><input type ="checkbox"/><span style="padding-left:15px">Unpaid</td>
</tr>
</tbody>
</table>
</div>
Just add these changes to your code to add checkbox to your table data
or just look here https://jsfiddle.net/nc2djn5p/151/ for the demo
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>
Hello for some reason I have a button that is breaking the bottom border that I have already set in place for my table. I eventually want to do this for all of my rows, but I would like to know how to prevent that from happening. Each row in my table should have a button, but I'd like to keep my borders intact.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
So, you must put button into td, because it's in table, but you're applying the border-bottom property to td so you have border under button, if you want to remove it you can add a class no-border and apply it to td in which you have your button so look at code, and you'll have only two columns have border, or another solution is to add <td></td> or <th></th> where appropriate into every <tr>that has no button.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
.no-border{
border:none;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td class="no-border"><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
Problem: Uneven number of column inside each row.
Solution: Either enter blank <td></td> or use colspan.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td colspan="2">$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
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.