发表新帖
发表新帖

Two HTML tables side by side, centered on the page

前端 未结
关注
10 1595
小蘑菇
小蘑菇 2020-12-25 12:10

I have two tables on a page that I want to display side by side, and then center them within the page (actually within another div, but this is the simplest I could come up

相关标签:
10条回答
  • 再見小時候
    2020-12-25 12:13

    I found I could solve this by simply putting the two side by side tables inside of a third table that was centered. Here is the code

    I added two lines of code at the top and bottom of the two existing tables

    <style>
  #outer {
    text-align: center;
  }
  
  #inner {
    text-align: left;
    margin: 0 auto;
  }
  
  .t {
    float: left;
  }
  
  table {
    border: 1px solid black;
  }
  
  #clearit {
    clear: left;
  }
</style>

<div id="outer">

  <p>Two tables, side by side, centered together within the page.</p>

  <div id="inner">
    <table style="margin-left: auto; margin-right: auto;">
      <td>
        <div class="t">
          <table>
            <tr>
              <th>a</th>
              <th>b</th>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
            </tr>
            <tr>
              <td>4</td>
              <td>9</td>
            </tr>
            <tr>
              <td>16</td>
              <td>25</td>
            </tr>
          </table>
        </div>

        <div class="t">
          <table>
            <tr>
              <th>a</th>
              <th>b</th>
              <th>c</th>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>2</td>
            </tr>
            <tr>
              <td>3</td>
              <td>5</td>
              <td>15</td>
            </tr>
            <tr>
              <td>8</td>
              <td>13</td>
              <td>104</td>
            </tr>
          </table>
        </div>
      </td>
    </table>
  </div>
  <div id="clearit">all done.</div>
</div>

    0 讨论(0)
  • 傲寒
    2020-12-25 12:14

    Give your inner div a width.

    EXAMPLE

    Change your CSS:

    <style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>

    To this:

    <style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
    0 讨论(0)
  • 粉色の甜心
    2020-12-25 12:17

    I realize this is an ancient question, but here goes anyway.

    The following will work in compliant browsers and IE8 in standards mode (i.e. with a doctype set).

    #inner {text-align:center;}
.t {display:inline-block;}

    Unfortunately, there's really no way to tweak it to work in IE6. For IE7, adding a zoom:1 to the .t divs (via a conditional comment) might help, but I don't have IE7 available for testing at the moment.

    0 讨论(0)
  • -上瘾入骨i
    2020-12-25 12:17

    I have provided two solutions. Pick up which one best suits for you.

    Solution#1:

    <html>
<style>
#container {
width: 50%;
margin: auto;
text-align: center;
}
#first {
width:48%;
float: left;
height: 200px;
background-color: blue;
}
#second {
width: 48%;
float: left;
height: 200px;
background-color: green;
}
#clear {
clear: both;
}
#space{
width: 4%;
float: left;
height: 200px;
}
table{
border: 1px solid black;
margin: 0 auto;
table-layout:fixed;
width:100%;
text-align:center;
}
</style>
<body>

<div id = "container" >
<div id="first">
    <table>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
        <tr>
            <td>Value1</td>
            <td>Value2</td>
        </tr>
    </table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
    </tr>
</table>
</div>
<div id = "clear" ></div>
</div>

</body>
</html>

    Solution#2:

    <html>
<style>
#container {
margin:0 auto;
text-align: center;
}
#first {
float: left;
}
#second {
float: left;
}
#clear {
clear: both;
}
#space{
width:20px;
height:20px;
float: left;
}
.table, .table th, .table td{
border: 1px solid black;
}
</style>
<body>

<table id = "container" >
<td>
<div id="first">
    <table class="table">
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
        <tr>
            <td>Value1</td>
            <td>Value2</td>
        </tr>
    </table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table class="table">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
    </tr>
</table>
</div>
<div id = "clear" ></div>
</div>
</td>
</table>
</body>
</html>

    Note: Change the width percentage as per your need in 1st solution.

    0 讨论(0)
  • [愿得一人]
    2020-12-25 12:18 
    <style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
    0 讨论(0)
  • 半阙折子戏
    2020-12-25 12:21

    The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.

    For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).

    0 讨论(0)
 看不清?
提交回复
热议问题