CODEWITHSUNDEEP
htmlcsshtml-tablecenter
w0ns88
w0ns88

Reputation: 345

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

I am trying to centre each rows (<tr>) of a table. I have an uneven number on a couple of rows.

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>

At the moment the output is as shown below:

enter image description here

But I would like it to be like so:

enter image description here

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

Upvotes: 4

Views: 269

Answers (4)

frank
frank

Reputation: 379

You could do it this way by nesting tables too. I increased the padding and spacing for a better view.

<!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>

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

example with 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>

for INFOS only . the CSS for your table would be : 

tr {
  display:flex;
  justify-content:center;
}
td {
  min-width:1.5em;
}

Upvotes: 6

Rico_93
Rico_93

Reputation: 108

<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>

Upvotes: 1

Related Questions