Geek Answers Handbook

Is it possible to center each row / tr in a table?

I am trying to center each row ( <tr>) table. I have an odd number on a couple of lines.

Here is an example of my HTML:

<!DOCTYPE html>
<html>
<body>

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
  </tr>
</table>

</body>
</html>

Currently, the output is as shown below:

enter image description here

But I would like it to be like this:

enter image description here

If this can be achieved, I would be very happy to know how this can be done.

+4
source share
4 answers

example with a regular tag (same structure)

div {
  display:table;
  border:solid 1px;
  margin:auto;
  }
p {
  margin:0;
  display:flex;
  justify-content:center;
  }
span {
  margin:3px;
  min-width:1em;
  border:solid 1px;;
  }
<div>
  <p>
    <span> 1 </span>
    <span> 2 </span>
    <span> 3 </span>
    <span> 4 </span>
    <span> 5 </span>
    <span> 6 </span>
    </p>
  <p>
    <span> 7 </span>
    <span> 8 </span>
    <span> 9 </span>
    <span> 10 </span>
    <span> 11</span>
    </p>
  </div>
Run codeHide result

INFOS only . CSS for your table:

tr {
  display:flex;
  justify-content:center;
}
td {
  min-width:1.5em;
}
+6
source 
<table width="652" height="120" border="0">
  <tr>
    <td width="646" height="57"><table width="649" height="55" border="1">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center" valign="baseline"><table width="528" height="55" border="1">
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        </tr>
    </table></td>
  </tr>
</table>
+1
source

, . .

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  .inside_table td{
    border: 1px solid black;
  }
  .table_out{
    border: 1px solid black;
  }
 .table_out td{
    border: 1px solid black;
  }
  </style>
</head>
<body>

  <table class="table_out" cellpadding="10" cellspacing="10">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td colspan="6" style="border:none">
        <table class="inside_table" cellpadding="10" cellspacing="10">
          <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</body>
</html>
Hide result
+1

Another solution using flexbox . You can specify the number of columns for each row using CSS.

Read more about flexbox here.

div.wrapper {
  width: 240px;
  display: flex;
  flex-wrap: wrap;
  flex-flow: row wrap;
  text-align: center;
  justify-content: center;
  border: 2px solid grey;
  padding: 3px;
}
div.wrapper div {
  border: 2px solid grey;
  width: calc((100% - (5px * 2 * 6)) / 6);
  /* 6 - Number of columns in a row */
  /* 5px - 3px margin + 2px border width */
  margin: 3px;
}
<!DOCTYPE html>
<html>

<body>
  <div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </div>
</body>

</html>
Run codeHide result
+1
source

More articles:


All Articles