How to center tbody within a table while having text-align:left?

Question

#present-container{
        background-color: antiquewhite;
        text-align: center;

    }
    #presentation{
        display: inline-block;
        text-align: center;
    }
    #tabela{
       display: inline-block;
       width: 40%;
       margin: 10px;
       padding: 25px;
       border: 2px solid #e4d8ba;
       border-radius: 8px;
       border-collapse: collapse;
    }
    
    #tabela tbody {

    }
    
    #tabela th, td {
       padding: 15px;
       text-align: left;
       border-top: 2px solid #e4d8ba;
    }
    
    .top{
       border: none;
    }

<div id="present-containter">
  <div id="presentation">

    <table id="tabela">
      <tr><td class="top">Nearby</td><td class="top"><li>Beach: 500 meters (Pebble)</li><li>Restaurant: 1 km</li><li>Market: 200 meters</li></td></tr>
      <tr><td>Included in price</td><td><li>Bedlinen including towels</li><li>Final Cleaning</li><li>Consumption costs</li></td></tr>
      <tr><td>other</td><td><li>free WiFi</li><li>pets not allowed</li></td></tr>
    </table>
  </div>
</div>

Check this image:

How can I center the table body or table columns within the table while keeping text-align: left.

Please add the html to the question. Anyway, you cannot center the tbody alone but you have to center the whole table... — DaFois, Sep 03 '18 at 08:10
My first thought looking at that picture is that it should be expressed as a `section` containing nested lists, and thus solve the problem by not involving a tbody in the first place. — Quentin, Sep 03 '18 at 08:11
@לבנימלכה Done. added html code and css from the container divs — Asgarnian, Sep 03 '18 at 08:24
Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — lumio, Nov 14 '18 at 15:15

score 2 · Answer 1 · answered Nov 14 '18 at 15:27

If I'm understanding correctly you're looking for something like this. Also went and cleaned up your syntax which wasn't valid in many ways but hope this helps, cheers.

#present-container {
  border: 2px solid #e4d8ba;
  border-radius: 8px;
  background-color: antiquewhite;
  margin: 0 auto;
}

#tabela {
  padding: 25px;
  border-collapse: collapse;
  margin: 10px auto;
}

#tabela tr:not(:last-child) {
  border-bottom: 2px solid #e4d8ba;
}

#tabela td {
  padding: 15px;
}

<div id="present-container">

    <table id="tabela">
      <tbody>
        <tr>
          <td>
            Nearby
          </td>
          <td>
            <ul>
              <li>Beach: 500 meters (Pebble)</li>
              <li>Restaurant: 1 km</li>
              <li>Market: 200 meters</li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>
            Included in price
          </td>
          <td>
            <ul>
              <li>Bedlinen including towels</li>
              <li>Final Cleaning</li>
              <li>Consumption costs</li>
            </ul>
         </td>
        </tr>
        <tr>
          <td>
            other
          </td>
          <td>
            <ul>
              <li>free WiFi</li>
              <li>pets not allowed</li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
    
</div>

How to center tbody within a table while having text-align:left?

1 Answers1