I'm new to CSS and HTML and I'm trying to vertically center some text in a table header. At the moment the text is aligned with the top of the table cell. I was unsuccessful with vertical-align: middle;, and the only solution seems to be to add padding-top to match the space underneath the text. However this is not the best solution because I would like to have the text fit snugly within the table cell. Any ideas are appreciated.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u><br><br><br></th>
<th><u>Contact</u><br><br><br></th>
</tr>
</thead>
<tbody>
<tr>
<th align="left">Resource 1<br><br></th>
<th align="left" width=35%;>999-999-9999<br> <br></th>
</tr>
<tr>
<th align="left">Resource 2<br><br></th>
<th align="left">888-888-8888<br><br></th>
</tr>
<tr>
<th align="left">Resource 3<br><br></th>
<th align="left" width=35%;>777-777-7777<br> <br></th>
</tr>
</tbody>
</table>
</div>
You have done it right in your CSS, just remove your <br> tags. E.g.
<th><u>Resource</u></th>
The vertical alignment won't work whilst you're manually inserting lines under your headings.
Full example
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1<br><br></td>
<td align="left" width=35%;>999-999-9999<br> <br></td>
</tr>
<tr>
<td align="left">Resource 2<br><br></td>
<td align="left">888-888-8888<br><br></td>
</tr>
<tr>
<td align="left">Resource 3<br><br></td>
<td align="left" width=35%;>777-777-7777<br> <br></td>
</tr>
</tbody>
</table>
</div>
Try like this , why are you put <br> and <td> to <th>
Table <td> The elements are the data containers of the table.
HTML Tag is
A line break is marked up as follows:
This text contains<br>a line break.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<h3>Page title here</h3>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1</td>
<td align="left" width=35%;>999-999-9999</td>
</tr>
<tr>
<td align="left">Resource 2</td>
<td align="left">888-888-8888</td>
</tr>
<tr>
<td align="left">Resource 3</td>
<td align="left" width=35%;>777-777-7777</td>
</tr>
</tbody>
</table>
learn more about html table https://www.w3schools.com/html/html_tables.asp
Define a height value for the th elements
Define an explicit (absolute) height for your table header cells (th) using length unit values (e.g: 65px), then declare the vertical-align rule on these elements.
Code Snippet Demonstration:
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding: 0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
/* additional */
height: 65px;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<th align="left">Resource 1<br><br></th>
<th align="left" width=35%;>999-999-9999<br> <br></th>
</tr>
<tr>
<th align="left">Resource 2<br><br></th>
<th align="left">888-888-8888<br><br></th>
</tr>
<tr>
<th align="left">Resource 3<br><br></th>
<th align="left" width=35%;>777-777-7777<br> <br></th>
</tr>
</tbody>
</table>
</div>
Don't use <br> tags for layout - that's a no-go! It will mess up whatever you try concerning vertical alignment and top/bottom padding and margins, like in the code in your question.
Erase them all and use top and bottom padding instead.
If still needed, use vertical-align, but in most cases you won't need it. And use the td tag for cells in the tbody, not th.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
#myWebPage > h3 {
padding: 40px 0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 30px 0;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage">
<h3>Page title here</h3>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1</td>
<td align="left" width=35%;>999-999-9999</td>
</tr>
<tr>
<td align="left">Resource 2</td>
<td align="left">888-888-8888</td>
</tr>
<tr>
<td align="left">Resource 3</td>
<td align="left" width=35%;>777-777-7777</td>
</tr>
</tbody>
</table>
</div>
Related
I have the table shown below; what I want is to insert an image next to the table in my pdf view. I am using domPDF.
I try to use display inline-block but domPDF doesn't support display inline.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3 {
color: #ab5401;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #ad9c82;
}
table .desc {
text-align: left;
}
table .total .total-div {
text-decoration: line-through;
}
table .total {
background: #ad9c82;
color: #FFFFFF;
}
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #ab5401;
font-size: 1.4em;
border-top: 1px solid #ab5401;
}
table tfoot tr td:first-child {
border: none;
}
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc">
<h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc">
<h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="total">$3,200.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
While the image for placeholder is the following:
<img src="https://picsum.photos/200" alt="Image example">
I tried to add it but it is always placed under the table, not next to it as I want.
Try Adding good old floats.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3 {
color: #ab5401;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #ad9c82;
}
table .desc {
text-align: left;
}
table .total .total-div {
text-decoration: line-through;
}
table .total {
background: #ad9c82;
color: #FFFFFF;
}
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #ab5401;
font-size: 1.4em;
border-top: 1px solid #ab5401;
}
table tfoot tr td:first-child {
border: none;
}
<div style="width: 65%;float:left;">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc">
<h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc">
<h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="total">$3,200.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
</div>
<div style="width: 30%;float:left;">
<img src="https://picsum.photos/200" alt="Image example" style="width: 100%;">
</div>
.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>
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>