With the following table I have some problems. First, what's wrong with the html? I'm getting errors flagged. But the main problem is, that the leftcolumn is not getting a complete border and I cannot figure out why.
JSFiddle here
<!DOCTYPE html>
<html>
<head>
<title> Auflistung 2014</title>
<style type="text/css">
* html body {
margin: 0;
padding: 0;
border: 0;
}
body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "Lucida Console", sans-serif;
font-size: 66%;
}
table {
border-spacing: 0;
border-collapse: collapse;
border: 0;
width: 650px;
}
td {
white-space: nowrap;
text-align: right;
border-collapse: collapse;
border: 1px solid #000;
}
th {
font-family: Helvetica;
font-size: 120%;
}
body {
margin: 10px;
}
.linkespalte {
text-align: center;
width: 80px;
font-size: 100%;
border-collapse: collapse;
border: 1px solid #000;
}
.lfd {
width: 3em;
}
.bet {
width: 6em;
}
.vorst {
width: 6em;
}
.date {
width: 6em;
}
.mwst {
width: 4em;
}
</style>
</head>
<body>
<br/>
<br/>
<table>
<tr>
<th colspan="7"> Ueberschrift I </th>
</tr>
<tr>
<td colspan="3">Summe Netto: 0.00</td>
<td colspan="4">Summe Vorsteuer 7%: 0.00 Summe Vorsteuer 19%: 0.00</td>
</tr>
</table>
<br/>
<br/>
<table>
<tr>
<th colspan="7">Ueberschrift II</th>
</tr>
<tr>
<td class="linkespalte" rowspan="250"><em>480</em></td>
<td class="lfd"> 1</td>
<td class="date"> 18.12.</td>
<td width="120">Fa XY</td>
<td width="120">iPad AIR 16GB</td>
<td width="10" class="bet"> 369.00</td>
<td class="mwst"> 19</td>
<td class="vorst"> 58.92</td>
</tr>
<tr>
<td colspan="3">Summe Netto: 310.08</td>
<td colspan="4">Summe Vorsteuer 7%: 0.00 Summe Vorsteuer 19%: 58.92</td>
</tr>
</table>
</body>
</html>
Your code is as below :
<td class="linkespalte" rowspan="250" ><em>480</em></td>
But, it should be as below :
<td class="linkespalte" rowspan="2" ><em>480</em></td>
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.
.transfers table{
width: 650px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .date{
text-align: center;
}
.transfers .amount{
text-align: right;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style='background-color: blue'>211</td>;
<td class='date' style='background-color: blue'>2022-03-29</td>;
<td class='amount' style='background-color: blue'>IN: £4.00</td>;
</tr>;
</tbody>
</table>
</div>
</body>
I am currently trying to make it so ID is on the left side, date is in the centre and amount is on the right side:
However, as you can see from the image below using the CSS code above, the spacing between "Date" and "Amount" is large. Date is clearly not in the centre.
Set for all columns the same width.
.transfers table {
width: 650px;
margin: 0px auto;
border-collapse: collapse;
}
.transfers tr {
border-bottom: 1px solid #cbcbcb;
}
.transfers th {
font-family: "Montserrat", sans-serif;
}
.transfers th, td {
text-align: center;
/* border: none; */
height: 30px;
padding: 3px;
font-size: 20px;
width: 30%;
}
.transfers .id {
text-align: left;
}
.transfers .date{
}
.transfers .amount{
text-align: right;
}
<div class="transfers">
<table border>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">211</td>
<td class='date' >2022-03-29</td>
<td class='amount' >IN: £4.00</td>
</tr>
<tr>
<td class="id">211</td>
<td class='date' >2022-03-29</td>
<td class='amount' >IN: £4.00</td>
</tr>
</tbody>
</table>
</div>
It's not the table that is not centered. Your columns appear with different widths. You could insert width for the largest or all columns to equally distribute the space.
.transfers table{
width: 650px;
margin: 450px auto;
}
.transfers .id{
text-align: center;
width: 33.333333%;
}
.transfers .date {
text-align: center;
width: 33.333333%;
}
.transfers .amount {
text-align: right;
width: 33.333333%;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style='background-color: blue'>211</td>;
<td class='date' style='background-color: blue'>2022-03-29</td>;
<td class='amount' style='background-color: blue'>IN: £4.00</td>;
</tr>;
</tbody>
</table>
</div>
For more options, you'll find some methods which will help you in Creating 3 Perfectly Equal Columns that take up 100% on the Browser Window Width
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .date{
text-align: center;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style='background-color: blue'>211</td>;
<td class='date' style='background-color: blue'>2022-03-29</td>;
<td class='amount' style='background-color: blue'>IN: £4.00</td>;
</tr>;
</tbody>
</table>
</div>
I'm stuck with a simple table design as i'm from backend I need a table like this
What I have right now
table {
border-collapse: collapse;
width: 100%;
}
tr {
border: none;
}
.first{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.middle{
width: 60%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.last{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 10px;
}
<table>
<tr>
<td class="University">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</table>
Please help. I have tried with multiple html table attributes all gone in vain.
Set the thead tr element bottom border, and the right border of the .first element:
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid #ddd;
}
td {
padding: 10px;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.first {
border-right: 1px solid #ddd;
}
.middle {
width: 100%;
}
<table>
<thead>
<tr>
<th colspan="3">Unique values:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</tbody>
</table>
Actually, your picture is not that clear.
I was not clear where you want border actually.
But I try to do this, Run the code snippet and have a look, and let me know if this works for you or not.
.colspan2border
{
border-collapse: collapse;
border-bottom: 1px solid red;
}
.rightBorder
{
border-collapse: collapse;
border-right: 1px solid red;
}
.pr-left1
{
padding-left: 1rem;
}
table
{
border-collapse: collapse;
}
tr
{
border: none;
}
<table>
<tr colspan="2" class='colspan2border'><td>Unique values:</td></tr>
<tr>
<td class="rightBorder pr-left1">University</td>
<td>870</td>
</tr>
<tr>
<td class="rightBorder pr-left1">Custom</td>
<td>560</td>
</tr>
</table>
I have placed the image but it breaks when we resize the window.
I want it in the center of the first column which is description below the email service.
I want it to remain in the center all the time.
I have given the td position relative and made the image absolute position. Its relative to the td................................
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position: relative">Email Service
<img style="position: absolute; left: 300px; top: 70px;" src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
Wrap the text and the image inside a div with a flex box property, and then you can center it as you like
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
.flex-b {
display:flex;
align-items:center;
justify-content:center;
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex-b">
<span>Email Service</span>
<img src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</div>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
JSFiddle
I can't resolve the gap between a h2 tag and a table. Beside, if you look at my attached image, you will se that in the second table, the first row's width(header) is shorter than the rest, any help is greatly appreciated!
h2 and table css :
.tieudemien
{
line-height: 24px;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
width:498px;
margin-bottom: 0;
padding-bottom: 0;
margin-left:1px;
}
.tb {
width: 500px;
padding-top:0;
padding-bottom:0;
}
Padding issue:
table td {
padding: 0;
}
See it here: http://jsfiddle.net/uryeto61/4/
Here's result: http://jsfiddle.net/abruzzi/uryeto61/3/
You can just change the padding of class .tdkq and tddd below:
.tdkq, .tddd {
padding: 0;
}
demo - http://jsfiddle.net/victor_007/uryeto61/2/
add to table
cellpadding='0'
Try this -
table td{
padding: 0;
}
Set table td Padding 0
Try This:
body {} table,
th,
td,
tr {
border-collapse: collapse;
}
.tb {
width: 500px;
padding-top: 0;
padding-bottom: 0;
}
/*2 cell đầu tiên, xác định độ rộng*/
.tdkq {
width: 70%;
vertical-align: top;
}
.tddd {
width: 30%;
vertical-align: top;
}
/*bảng kết quả và đầu đuôi*/
.tbkq {
width: 100%;
word-wrap: break-word;
table-layout: fixed;
float: left;
margin-bottom: 0;
padding-bottom: 0;
border-right: 1px solid #CCC;
}
.tbdd {
width: 100%;
}
.tbdd td {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
/*cột giải và kết quả của bảng kết quả*/
.trkq {
width: 100%;
}
.thkqgiai {
width: 20% !important;
text-align: center;
color: white;
background-color: #910000;
}
.thkqso {
width: 80% !important;
}
.tdkqgiai {
text-align: center;
background-color: #F9F9F9;
color: #910000;
}
.tdkqgiaidb {
text-align: center;
color: white;
background-color: #910000;
}
.tdkqso {
text-align: center;
word-wrap: break-word !important;
border-top: 1px solid #CCC;
}
.tdkqsodb {
text-align: center;
word-wrap: break-word !important;
color: red;
border-top: 1px solid #CCC;
}
/*cột đầu và đuôi của bảng đầu đuôi*/
.thdddau {
width: 30%;
color: white;
background-color: #910000;
}
.thddduoi {
width: 70%;
color: white;
background-color: #910000;
}
/*tiêu đề cho bảng kq*/
.tieudemien {
line-height: 24px;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
width: 500px;
margin-bottom: 0;
padding-bottom: 0;
margin-left: 1px;
}
.tieudecuoi {
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
margin-bottom: 0;
padding-top: 4px;
padding-bottom: 0;
width: 300px !important;
}
.tdtieudecuoi {
text-align: right;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
}
table td {
padding: 0;
}
<h2 class="tieudemien"> Kết quả xổ số Miền Bắc ngày 02-11-2014</h2>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">BTB</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">23411</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">37428</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">38460-75356</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">02055-66542-36814-52154-66881-20546</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">6300-7736-6062-3408</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">0235-2078-1344-6340-4550-6337</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">046-421-944</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">88-98-24-21</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">span</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">0,8</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">1,4</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">8,1,4,1</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">6,5,7</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso">2,6,4,0,6,4</td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">6,5,4,0</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">0,2</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">8</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso">1,8</td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">8</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>