Home > Software engineering >  Border won't show around table
Border won't show around table

Time：06-24

I am trying to put a black border around the table element but the border will not show. I tried adding box sizing to the table. I don't know if I have to assign a class to the table or use the menu id to fix this. I can only do this using HTML and CSS. I tried taking off style="overflow-x:auto;" from the table but it didn't do anything.

/*MENU TABLE*/

.table {
  background-color: #1A9AE3;
  padding-top: 100px;
  padding-bottom: 100px;
  box-sizing: border-box;
}

table {
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  font-size: 1vw;
  background-color: white;
  border: 15px black;
  box-sizing: border-box;
}


/*Add border.*/

thead {
  text-align: right;
}

td:nth-child(even) {
  text-align: left;
  padding-left: 100px;
}

td:nth-child(odd) {
  text-align: right;
  padding: 10px;
}

.row {
  display: flex;
  margin: 0 auto;
}

table a {
  text-decoration: none;
  color: black;
}


/*Change color based off background*/

table a:link {
  text-decoration: none;
}

table a:visited {
  text-decoration: none;
}

table a:hover {
  text-decoration: underline;
}

table a:active {
  text-decoration: underline;
}

th {
  padding: 10px;
}


/*ABOUT TEXT*/

.about {
  height: auto;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.column {
  flex: 50%;
  padding: 10px;
}

.column h2 {
  font-size: 2vw;
  padding-left: 200px;
}

.column p {
  padding-right: 200px;
  padding-top: 88px;
}

.column img {
  width: 500px;
  padding-left: 200px;
}
<!--MENU TABLE-->
<!--inspiration for menu: https://artsdistrictkitchen.com/ -->
<div >
  <table style="overflow-x:auto;" id="menu">
    <thead>
      <tr>
        <th>Menu</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="">Beverages & Drinks</a></td>
        <td>Burgers</td>
      </tr>
      <tr>
        <td><a href="">Appetizers </a></td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td><a href="">Snacks & Sides</a></td>
        <td>Description</td>
      </tr>
      <tr>
        <td><a href="">Main Dishes</a></td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td><a href="">Desserts</a></td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td></td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

You're not seeing it because you forgot to specify the border-style property. By default, the initial value is none:

/*MENU TABLE*/

.table {
  background-color: #1A9AE3;
  padding-top: 100px;
  padding-bottom: 100px;
  box-sizing: border-box;
}

table {
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  font-size: 1vw;
  background-color: white;
  border: 15px black;
  box-sizing: border-box;
  border-style: solid;
}


/*Add border.*/

thead {
  text-align: right;
}

td:nth-child(even) {
  text-align: left;
  padding-left: 100px;
}

td:nth-child(odd) {
  text-align: right;
  padding: 10px;
}

.row {
  display: flex;
  margin: 0 auto;
}

table a {
  text-decoration: none;
  color: black;
}


/*Change color based off background*/

table a:link {
  text-decoration: none;
}

table a:visited {
  text-decoration: none;
}

table a:hover {
  text-decoration: underline;
}

table a:active {
  text-decoration: underline;
}

th {
  padding: 10px;
}


/*ABOUT TEXT*/

.about {
  height: auto;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.column {
  flex: 50%;
  padding: 10px;
}

.column h2 {
  font-size: 2vw;
  padding-left: 200px;
}

.column p {
  padding-right: 200px;
  padding-top: 88px;
}

.column img {
  width: 500px;
  padding-left: 200px;
}
<!--MENU TABLE-->
<!--inspiration for menu: https://artsdistrictkitchen.com/ -->
<div >
  <table style="overflow-x:auto;" id="menu">
    <thead>
      <tr>
        <th>Menu</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="">Beverages & Drinks</a></td>
        <td>Burgers</td>
      </tr>
      <tr>
        <td><a href="">Appetizers </a></td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td><a href="">Snacks & Sides</a></td>
        <td>Description</td>
      </tr>
      <tr>
        <td><a href="">Main Dishes</a></td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td><a href="">Desserts</a></td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td></td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

Need to specify the style of the border. In this case solid. You can write border: solid 15px black; or just specify border-style.

/*MENU TABLE*/

.table {
  background-color: #1A9AE3;
  padding-top: 100px;
  padding-bottom: 100px;
  box-sizing: border-box;
}

table {
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  font-size: 1vw;
  background-color: white;
  border: solid 15px black;
  box-sizing: border-box;
}


/*Add border.*/

thead {
  text-align: right;
}

td:nth-child(even) {
  text-align: left;
  padding-left: 100px;
}

td:nth-child(odd) {
  text-align: right;
  padding: 10px;
}

.row {
  display: flex;
  margin: 0 auto;
}

table a {
  text-decoration: none;
  color: black;
}


/*Change color based off background*/

table a:link {
  text-decoration: none;
}

table a:visited {
  text-decoration: none;
}

table a:hover {
  text-decoration: underline;
}

table a:active {
  text-decoration: underline;
}

th {
  padding: 10px;
}


/*ABOUT TEXT*/

.about {
  height: auto;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.column {
  flex: 50%;
  padding: 10px;
}

.column h2 {
  font-size: 2vw;
  padding-left: 200px;
}

.column p {
  padding-right: 200px;
  padding-top: 88px;
}

.column img {
  width: 500px;
  padding-left: 200px;
}
<!--MENU TABLE-->
<!--inspiration for menu: https://artsdistrictkitchen.com/ -->
<div >
  <table style="overflow-x:auto;" id="menu">
    <thead>
      <tr>
        <th>Menu</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="">Beverages & Drinks</a></td>
        <td>Burgers</td>
      </tr>
      <tr>
        <td><a href="">Appetizers </a></td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td><a href="">Snacks & Sides</a></td>
        <td>Description</td>
      </tr>
      <tr>
        <td><a href="">Main Dishes</a></td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td><a href="">Desserts</a></td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td></td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Item & Price</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Description</td>
      </tr>
    </tbody>
  </table>
</div>

Page link：https//www.codepudding.com/Softwareengineering/452364.html

Prev:assigning multiple, different values in JS function
Next:Change background size of an element without a background image in CSS
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding