How to make tbody width == table width?-CodePudding

How do I make tbody within my table equal to the table width? I want to remove the margins, but

tbody{
    margin: 0%;
}

does nothing. I want to highlight a table data cell when the user hovers over it with its cursor. I have managed that, but there is a visible border between the data cell and the table row. How do I remove this border or margin?

Here is the CSS:

body{
    margin: 0%;
}
header{
    background-color: blueviolet;
}
nav{
    background-color: red;
}
div.nav_div{
    background-color: blue;
}

table{
    margin: auto;   
}
tbody, tr{
    margin: 0ch;
    border-width: 0ch;
    border-collapse: collapse;
    padding: 0%;
}
table tr td{
    text-align: center;
    font-size: 25px;
    margin: 0%;
}
td{
    padding-inline: 120px;
    padding-top: 20px;
    padding-bottom: 20px;
}
td:hover{
    background-color: chartreuse;
}

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Place Title Here</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<!-- place html web page content here -->
    <header>
        <nav>
            <div >
                <table>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </div>
            <div>
                words
            </div>
        </nav>
    </header>
<script>
// Place JavaScript Code Here
"use strict";

</script>

</body>

</html>

CodePudding user response：

border-collapse only applies to <table> there is very little in the way of CSS properties applied directly to <tbody> or <tr> if any. When applied correctly (ie to <table>), each border of <table>, <th>, and <td> will merge into a single border with it's neighboring border thereby eliminating any space between <table>, <th>, and <td>. See example. Also, I added min-width: max-content to <header> because the <table>'s width exceeded everything (inline-padding: 120px makes each cell at least 240px wide, so a width of at least 720px).

body {
  margin: 0%;
}

header {
  min-width: max-content;
  background-color: blueviolet;
}

nav {
  background-color: red;
}

div.nav_div {
  background-color: blue;
}

table {
  margin: auto;
  border-collapse: collapse;
}

td {
  text-align: center;
  font-size: 25px;
  padding-inline: 120px;
  padding-top: 20px;
  padding-bottom: 20px;
}

td:hover {
  background-color: chartreuse;
}

<header>
  <nav>
    <div >
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </table>
    </div>
    <div>
      words
    </div>
  </nav>
</header>

CodePudding user response：

Use fill-available fill-available. Note that the code doesn't run well in this snippet, you can bring it to your page to check if it work.

Allows for the heights and widths to be specified in intrinsic values using the max-content, min-content, fit-content and stretch (formerly fill) properties.

    table {
        width: -moz-available;          /* WebKit-based (Chrome, etc) browsers will ignore this. */
        width: -webkit-fill-available;  /* Firefox - Mozilla-based browsers will ignore this. */
        width: fill-available;
    }

But in my opinion, to achieve what you want, you can use Flex instead. it's more flexible and easy to tweak

.parent {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.child {
  flex: 1;
  text-align: center;
  border: 1px solid black;
  font-size: 25px;
}

.child:hover {
  background-color: chartreuse;
}

body {
  margin: 0%;
}

header {
  background-color: blueviolet;
}

nav {
  background-color: red;
}

div.nav_div {
  background-color: blue;
}

table {
  margin: auto;
}

tbody,
tr {
  margin: 0ch;
  border-width: 0ch;
  border-collapse: collapse;
  padding: 0%;
}

table tr td {
  text-align: center;
  font-size: 25px;
  margin: 0%;
}

td {
  padding-inline: 120px;
  padding-top: 20px;
  padding-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Place Title Here</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- place html web page content here -->
  <header>
    <nav>
      <div >
        <div >
          <div >1</div>
          <div >2</div>
          <div >3</div>
        </div>
      </div>
      <div>
        words
      </div>
    </nav>
  </header>
  <script>
    // Place JavaScript Code Here
    " use strict ";
  </script>

</body>

</html>