Probleem Table in div centreren

markvelde

veldesign
HTML:
<div class="container-fluid content">
  <div class="container">
    <div class="row">
      <div class="col-xl-6"><table width="200" border="1" cellspacing="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
</div>
      <div class="col-xl-6">Ik vind het een uitdaging om nieuwe trends toe te passen en creatieve looks te bedenken. Iedereen is bij mij welkom en samen gaan we op zoek naar een model dat het beste bij je past. Ik luister goed naar je wensen en geef dan mijn advies. Geen kapsel of haarkleur is mij te gek, mits het verantwoord toegepast kan worden. Maar... wil je alleen de puntjes laten bijwerken of je pony bij laten knippen, dan kan dat natuurlijk ook! Mijn ervaring heb ik opgedaan bij diverse kapsalons. Niet alleen als kapper, maar ook als opleider. Ik volg regelmatig trainingen over de laatste trends in het vak.</div>
    </div>
  </div>
</div>
Hallo,

kom er even niet uit. Ik wil graag een tabel centreren in een div.
Alles al geprobeerd met tekst lukt het wel maar een tabel centreren lukt mij niet.
Zal de html bijvoegen.

Alvast bedankt
 

maulem

Gevestigd lid
Je moet wel bootstrap.css linken in je html bestand, want je gebruikt allerlei bootstrap classes. De tabel wordt in dat geval automatisch gecentreerd.

HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<title>markvelde6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div class="container-fluid content">
  <div class="container">
    <div class="row">
      <div class="col-xl-6"><table width="200" border="1" cellspacing="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
</div>
      <div class="col-xl-6">Ik vind het een uitdaging om nieuwe trends toe te passen en creatieve looks te bedenken. Iedereen is bij mij welkom en samen gaan we op zoek naar een model dat het beste bij je past. Ik luister goed naar je wensen en geef dan mijn advies. Geen kapsel of haarkleur is mij te gek, mits het verantwoord toegepast kan worden. Maar... wil je alleen de puntjes laten bijwerken of je pony bij laten knippen, dan kan dat natuurlijk ook! Mijn ervaring heb ik opgedaan bij diverse kapsalons. Niet alleen als kapper, maar ook als opleider. Ik volg regelmatig trainingen over de laatste trends in het vak.</div>
    </div>
  </div>
</div>
</body>
</html>
 

maulem

Gevestigd lid
Sorry, de post van gisteren van mij is niet correct. Ik heb nog eens goed gekeken maar in mijn code wordt de gehele div class=''container'' gecentreerd, met daarin de row met beide columns. De tabel staat daarin uiterst links in de linker column, maar omdat div class=''container'' gecentreerd wordt, schuift de tabel mee op naar rechts, en lijkt het op fullscreen net alsof de tabel gecentreerd is. Maak je de browser echter kleiner, dan verschijnt de tabel niet meer perfect in het midden van de linkerkolom.

Het is wel mogelijk om de tabel werkelijk te centreren. Je dient dan div met class="container-fluid content" weg te laten en d-flex justify-content-center toe te voegen aan de column die je wilt centreren. Zie code hieronder.
HTML:
  <div class="container">
    <div class="row">
      <div class="col-xl-6 d-flex justify-content-center"><table width="200" border="1" cellspacing="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
</div>
      <div class="col-xl-6">Ik vind het een uitdaging om nieuwe trends toe te passen en creatieve looks te bedenken. Iedereen is bij mij welkom en samen gaan we op zoek naar een model dat het beste bij je past. Ik luister goed naar je wensen en geef dan mijn advies. Geen kapsel of haarkleur is mij te gek, mits het verantwoord toegepast kan worden. Maar... wil je alleen de puntjes laten bijwerken of je pony bij laten knippen, dan kan dat natuurlijk ook! Mijn ervaring heb ik opgedaan bij diverse kapsalons. Niet alleen als kapper, maar ook als opleider. Ik volg regelmatig trainingen over de laatste trends in het vak.</div>
  </div>
</div>
 

markvelde

veldesign
Hallo, sorry voor mijn late reactie.

aan beide zijden een padding gegeven, staat nu mooi gecentreerd.
Moet nog wel verschillende browsers testen dus hoop dat het oed komt.

Bedankt voor het meedenken.
 

Erick

Gewaardeerd
In de code die Maulem laat zien, mis ik de <table>. De </table> is er wel. Misschien kan dit problemen veroorzaken in bepaalde browsers.
 

Rubensky

Moderator
Team lid
Om problemen met de tabel te voorkomen zou ik er een div omheen zetten.
 

maulem

Gevestigd lid
Het kan ook zonder die ondoorzichtige bootstrap code. Je moet dan wel de CSS zelf opzetten. Ik maak in het volgende voorbeeld gebruik van 3 afzonderlijke niveau's.

Het hoogste niveau is de buitendiv, die met een breedte van 60% en door margin: 0 auto gecentreerd wordt weergegeven in het browserwindow.

Daarbinnen komen twee container divs, die allebei 50% van de buitendiv in beslag nemen. De content van zo'n container div wordt gecentreerd met text-align: center en om beide containers naast elkaar te kunnen laten staan, zijn ze beide float: left.

De content van de container wordt gevat in een binnenste gecentreerd div. Om de text-align: center van de er om heen staande container div weer op te heffen is de content van de gecentreerd div text-align: left. Verder is de binnenste div display: inline-block omdat de text-align: center van de container div alleen werkt op inline elementen.

Binnen een media query voor beneden de 1200 pixels wordt de buitendiv wat verbreed naar 80%, omdat dit relatief beter uitziet in smallere browsers. De container divs worden beide op width: 100% ingesteld omdat ze niet meer naast elkaar liggen (passen) maar onder elkaar komen te staan; dit wordt bereikt met de eigenschap float: none.

CSS:
<!DOCTYPE HTML>
<html>
<head>
<title>markvelde7</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
font-family: sans-serif;
font-size: 16px;
color: #212529;
line-height: 1.5;
}

.buitendiv {
width: 60%;
margin: 0 auto;
}

.container {
width: 50%;
text-align: center;
float: left;
}

.gecentreerd {
display: inline-block;
text-align: left;
}

@media only screen and (max-width: 1200px) {
.buitendiv {
width: 80%;
}

.container {
width: 100%;
float: none;
}
}
</style>
</head>

<body>
  <div class="buitendiv">
    <div class="container">
      <div class="gecentreerd">
        <table width="200" border="1" cellspacing="1">
          <tbody>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="container">
      <div class="gecentreerd">Ik vind het een uitdaging om nieuwe trends toe te passen en creatieve looks te bedenken. Iedereen is bij mij welkom en samen gaan we op zoek naar een model dat het beste bij je past. Ik luister goed naar je wensen en geef dan mijn advies. Geen kapsel of haarkleur is mij te gek, mits het verantwoord toegepast kan worden. Maar... wil je alleen de puntjes laten bijwerken of je pony bij laten knippen, dan kan dat natuurlijk ook! Mijn ervaring heb ik opgedaan bij diverse kapsalons. Niet alleen als kapper, maar ook als opleider. Ik volg regelmatig trainingen over de laatste trends in het vak.</div>
    </div>
  </div>
</body>
</html>
 
Bovenaan Onderaan