如何居中对齐所有HTML表格，以及如何保持所有表格的宽度相同？

时间：2016-09-05 06:35:31

标签： html css html-table

我遇到了一个问题，因为我希望将所有表格中心对齐，就像'Ruby Table'一样，但我不知道如何做到这一点。

另外你可能会注意到有些表比其他表宽，我可以实现什么CSS规则来改变整个表的宽度，所以所有表都可以是相同的宽度？

这是我的HTML代码：

<!DOCTYPE html>
<html>

<head>
  <title>Personal Bests</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>

   <div id="section">
      <article>
        <h2>FireFalcons1 Best Times</h2>
     <p>
    Below you will find all of my best times on Time Trials Max Speed (100%) and Story Mode (100%)
    </p>
    <p class="TA">
    TIME ATTACK - MAX SPEED (100%)
      </article>
    </div>

<!--Ruby HMTL Table-->

<table class="rubyTable">
  <tr>
    <th class="rubyHeader" colspan="6">Ruby Cup</th>
  </tr>
  <tr>
    <td class="rubyTitles">Course</td>
    <td class="rubyTitles">Time</td>
    <td class="rubyTitles">Best Lap</td>
    <td class="rubyTitles">Machine</td>
    <td class="rubyTitles">Replay</td>
    <td class="rubyTitles">Rank</td>
  </tr>
  <tr>
    <td class="rubyTracks">Mute City<br>- Twist Road - </td>
    <td class="rubyData">53"699</td>
    <td class="rubyData">15"645</td>
    <td class="rubyData">Quick Star - G4</td>
    <td class="rubyData">Coming Soon</td>
    <td class="rubyData">46th</td>
  </tr>
  <tr>
    <td class="rubyTracks">   Aeropolis<br>   - Multiplex - </td>
    <td class="rubyData">1'50"727</td>
    <td class="rubyData">33"825</td>
    <td class="rubyData">Fat Shark</td>
    <td class="rubyData">Coming Soon</td>
    <td class="rubyData">45th</td>
  </tr>
  </table>


<!--Sapphire HMTL Table-->

  <table class="sapphireTable">
  <tr>
    <td class="sapphireHeader" colspan="6">Sapphire Cup</td>
  </tr>
  <tr>
    <td class="sapphireTitles">Course</td>
    <td class="sapphireTitles">Time</td>
    <td class="sapphireTitles">Best Lap</td>
    <td class="sapphireTitles">Machine</td>
    <td class="sapphireTitles">Replay</td>
    <td class="sapphireTitles">Rank</td>
  </tr>
  <tr>
    <td class="sapphireTracks"> Mute City <br> - Serial Gaps - </td>
    <td class="sapphireData">56"747</td>
    <td class="sapphireData">16"988</td>
    <td class="sapphireData">Gallant Star - G4</td>
    <td class="sapphireData">Coming Soon</td>
    <td class="sapphireData">26th</td>
  </tr>
  <tr>
    <td class="axTracks">Mute City<br>- Sonic Oval - </td>
    <td class="axData">40"936</td>
    <td class="axData">11"550</td>
    <td class="axData">Quick Star - G4</td>
    <td class="axData">Coming Soon</td>
    <td class="axData">16th</td>
  </tr>
  </table>

<!--Emerald HMTL Table-->

  <table class="emeraldTable">
  <tr>
    <td class="emeraldHeader" colspan="6">Emerald Cup </td>
  </tr>
  <tr>
    <td class="emeraldTracks">Casino Palace<br>- Double Branches -</td>
    <td class="emeraldData">2'31"256</td>
    <td class="emeraldData">47"016</td>
    <td class="emeraldData">Gallant Star - G4</td>
    <td class="emeraldData">Coming Soon</td>
    <td class="emeraldData">33rd</td>
  </tr>
  <tr>
    <td class="emeraldTracks">Lightning<br>- Loop Cross - </td>
    <td class="emeraldData">2'23"611</td>
    <td class="emeraldData">45"672</td>
    <td class="emeraldData">Fat Shark</td>
    <td class="emeraldData">Coming Soon</td>
    <td class="emeraldData">41st</td>
  </tr>
  <tr>
    <td class="emeraldTracks">Big Blue <br>- Ordeal - </td>
    <td class="emeraldData">2"18"024</td>
    <td class="emeraldData">40"999</td>
    <td class="emeraldData">Gallant Star - G4</td>
    <td class="emeraldData">Coming Soon</td>
    <td class="emeraldData">32nd</td>
  </tr>
  </table>
<!--Diamond HMTL Table-->
  <table class="diamondTable">
  <tr>
    <td class="diamondHeader" colspan="6">Diamond Cup </td>
  </tr>
  <tr>
    <td class="diamondTitles">Course</td>
    <td class="diamondTitles">Time</td>
    <td class="diamondTitles">Best Lap</td>
    <td class="diamondTitles">Machine</td>
    <td class="diamondTitles">Replay </td>
    <td class="diamondTitles">Rank</td>
  </tr>
  <tr>
    <td class="diamondTracks">Cosmo Terminal<br>- Trident - </td>
    <td class="diamondData">2'08"019</td>
    <td class="diamondData">40"224</td>
    <td class="diamondData">Gallant Star - G4</td>
    <td class="diamondData">Coming Soon</td>
    <td class="diamondData">20th</td>
  </tr>
  <tr>
    <td class="diamondTracks">Sand Ocean <br>- Lateral Shift - </td>
    <td class="diamondData">1'26"882</td>
    <td class="diamondData">25"401</td>
    <td class="diamondData">Fat Shark</td>
    <td class="diamondData">Coming Soon</td>
    <td class="diamondData">33rd</td>
  </tr>
  </table>
<!--AX HMTL Table-->
  <table class="axTable">
  <tr>
    <td class="axHeader" colspan="6">AX Cup</td>
  </tr>
  <tr>
    <td class="axTitles">Course</td>
    <td class="axTitles">Time</td>
    <td class="axTitles">Best Lap</td>
    <td class="axTitles">Machine</td>
    <td class="axTitles">Replay </td>
    <td class="axTitles">Rank </td>
  </tr>
  <tr>
    <td class="axTracks">Lightning<br>- Thunder Road - </td>
    <td class="axData">2'48"170</td>
    <td class="axData">50"035</td>
    <td class="axData">Gallant Star - G4</td>
    <td class="axData">Coming Soon</td>
    <td class="axData">24th</td>
  </tr>
  <tr>
    <td class="axTracks">Green Plant<br>- Spiral - </td>
    <td class="axData">3'07"901</td>
    <td class="axData">56"641</td>
    <td class="axData">Quick Star - G4</td>
    <td class="axData">Coming Soon</td>
    <td class="axData">22nd</td>
  </tr>

</table>
---<!--End of Table-->---
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

这是我的CSS：

body {
  background-color: #101010;
}

h2.main {
    font-size: 20px; 
    letter-spacing:1px; 
    text-align: center;
    text-shadow: 0px 0px 2px #2050FF,
                -2px -2px 2px #2050FF,
                 2px -2px 2px #2050FF,
                -2px 2px 2px #2050FF,
                 2px 2px 2px #2050FF;"
}

#section {
    max-width: 960px;
    color: #FFFFFF;
    padding:4px;    
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
     padding-left: 220px;
    text-align: center; 
    letter-spacing: 1px;
}

#section2 {
    max-width: 1000px;
    color: #FFFFFF;
    padding:4px;    
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
     padding-left: 220px;
    text-align: center; 
    letter-spacing: 1px;

}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}

   /*=====================
      Personal Bests CSS
    =====================*/

.TA{
    text-shadow:2px 3px 5px rgba(100,100,100,1);
    font-weight:normal;
    color:#FFFFFF;
    letter-spacing:2pt;
    word-spacing:2pt;
    font-size:22px;
    text-align:center;
    font-family:impact, sans-serif;
    line-height:1;
    margin:2px;
    margin-bottom:15px;
    padding:0px;    
}

   /*===============
        Ruby CSS
    ==============*/

.rubyTable{ 
     border-collapse:collapse;
     border-spacing:0;
     border-style: solid; 
     border-width: 4px;
     border-color: #4a4a4a;
     margin: 0px auto;
     margin-bottom:20px;
}

.rubyHeader{
    background-color:#7a0000;
    text-shadow:1px 2px 9px rgba(0,0,0,1);
    font-weight:bold;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:0pt;
    font-size:30px;
    text-align:center;
    font-family:palatino linotype, palatino, serif;
    line-height:2;
    vertical-align:top;
    border: 1px solid black;
}

.rubyTitles{
    background-color:#380000;
    font-weight:bold;
    font-style:italic;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:3pt;
    font-size:20px;
    text-align:center;
    font-family:trebuchet MS, sans-serif;
    line-height:1;
}

.rubyTracks{
    background-color:#120204;
    text-shadow:1px 1px 6px rgba(156,0,0,1);
    font-weight:bold;
    text-transform:uppercase;
    color:#d1d1d1;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:18px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
    line-height:1;
}

.rubyData{
    text-shadow:1px 4px 6px rgba(0,0,0,1);
    font-weight:bold;
    color:#ffffff;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:16px;
    text-align:center;
    font-family:tahoma, verdana, arial, sans-serif;
    line-height:1;
    background-color:#000000;

}

.rubyTable td{
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    border: 1px solid red;
}

.rubyTable th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}



  /*===============
      Sapphire CSS
    ==============*/



.sapphireTable{
     border-collapse:collapse;
     border-spacing:0;
     border-style: solid; 
     border-width: 4px;
     border-color: #4a4a4a;
     margin: 0px auto;
     margin-bottom:20px;
}   

.sapphireHeader{
    background-color:#00007a;
    font-weight:bold;
    text-shadow:1px 2px 9px rgba(0,0,0,1);
    font-weight:bold;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:0pt;
    font-size:30px;
    text-align:center;
    font-family:palatino linotype, palatino, serif;
    line-height:2;
    vertical-align:top;
}

.sapphireTitles{
    background-color: #000038;
    font-weight:bold;
    font-style:italic;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:3pt;
    font-size:20px;
    text-align:center;
    font-family:trebuchet MS, sans-serif;
    line-height:1;
}

.sapphireTracks{
    background-color:#020412;
    text-shadow:1px 1px 6px rgba(0,0,156,1);
    font-weight:bold;
    text-transform:uppercase;
    color:#d1d1d1;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:18px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
    line-height:1;
}

.sapphireData{
    text-shadow:1px 4px 6px rgba(0,0,0,1);
    font-weight:bold;
    color:#ffffff;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:16px;
    text-align:center;
    font-family:tahoma, verdana, arial, sans-serif;
    line-height:1;
    background-color:#000000;
}

.sapphireTable td{
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    border: 1px solid blue;
}

.sapphireTable th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}




    /*===============
      Emerald CSS
    ==============*/



.emeraldTable{
     border-collapse:collapse;
     border-spacing:0;
     border-style: solid; 
     border-width: 4px;
     border-color: #4a4a4a;
     margin: 0px auto;
     margin-bottom:20px;
}

.emeraldHeader{
    background-color:#036400;
    font-weight:bold;
    text-shadow:1px 2px 9px rgba(0,0,0,1);
    font-weight:bold;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:0pt;
    font-size:30px;
    text-align:center;
    font-family:palatino linotype, palatino, serif;
    line-height:2;
    vertical-align:top;
}

.emeraldTitles{
    background-color:#003800;
    font-weight:bold;
    font-style:italic;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:3pt;
    font-size:20px;
    text-align:center;
    font-family:trebuchet MS, sans-serif;
    line-height:1;
}

.emeraldTracks{
    background-color:#041202;
    text-shadow:1px 1px 6px rgba(0,156,0,1);
    font-weight:bold;
    text-transform:uppercase;
    color:#d1d1d1;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:18px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
    line-height:1;
}

.emeraldData{
    text-shadow:1px 4px 6px rgba(0,0,0,1);
    font-weight:bold;
    color:#ffffff;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:16px;
    text-align:center;
    font-family:tahoma, verdana, arial, sans-serif;
    line-height:1;
    background-color:#000000;
}

.emeraldTable td{
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    border: 1px solid green;
}

.emeraldTable th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}


    /*===============
      Diamond CSS
    ==============*/

.diamondTable{
     border-collapse:collapse;
     border-spacing:0;
     border-style: solid; 
     border-width: 4px;
     border-color: #4a4a4a;
     margin: 0px auto;
     margin-bottom:20px;
}

.diamondTable td{
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    border: 1px solid yellow;
}

.diamondTable th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}

.diamondHeader{
    background-color:#916c24;
    font-weight:bold;
    text-shadow:1px 2px 9px rgba(0,0,0,1);
    font-weight:bold;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:0pt;
    font-size:30px;
    text-align:center;
    font-family:palatino linotype, palatino, serif;
    line-height:2;
    vertical-align:top;
}

.diamondTitles{
    background-color:#381c00;
    font-weight:bold;
    font-style:italic;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:3pt;
    font-size:20px;
    text-align:center;
    font-family:trebuchet MS, sans-serif;
    line-height:1;
}

.diamondTracks{
    background-color:#121002;
    text-shadow:1px 1px 6px rgba(156,156,0,1);
    font-weight:bold;
    text-transform:uppercase;
    color:#d1d1d1;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:18px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
    line-height:1;
}

.diamondData{
    text-shadow:1px 4px 6px rgba(0,0,0,1);
    font-weight:bold;
    color:#ffffff;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:16px;
    text-align:center;
    font-family:tahoma, verdana, arial, sans-serif;
    line-height:1;
    background-color:#000000;
}


    /*===============
         AX CSS
    ==============*/

.axTable{
     border-collapse:collapse;
     border-spacing:0;
     border-style: solid; 
     border-width: 4px;
     border-color: #4a4a4a;
     margin: 0px auto;
     margin-bottom:20px;
}

.axTable td{
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    border: 1px solid purple;
}

.axTable th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:11px 20px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}   

.axHeader{
    background-color:#4e009c;
    font-weight:bold;
    text-shadow:1px 2px 9px rgba(0,0,0,1);
    font-weight:bold;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:0pt;
    font-size:30px;
    text-align:center;
    font-family:palatino linotype, palatino, serif;
    line-height:2;
    vertical-align:top; 
}

.axTitles{
    background-color:#350069;
    font-weight:bold;
    font-style:italic;
    color:#eeeeee;
    letter-spacing:2pt;
    word-spacing:3pt;
    font-size:20px;
    text-align:center;
    font-family:trebuchet MS, sans-serif;
    line-height:1;
}

.axTracks{
    background-color:#080212;
    text-shadow:1px 1px 6px rgba(78,0,156,1);
    font-weight:bold;
    text-transform:uppercase;
    color:#d1d1d1;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:18px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
    line-height:1;
}

.axData{
    text-shadow:1px 4px 6px rgba(0,0,0,1);
    font-weight:bold;
    color:#ffffff;
    letter-spacing:1pt;
    word-spacing:1pt;
    font-size:16px;
    text-align:center;
    font-family:tahoma, verdana, arial, sans-serif;
    line-height:1;
    background-color:#000000;
}   






.tg .tg-mzmv{
    font-weight:bold;
    font-size:14px;
    background-color:#ff3838;
    text-align:center;
    vertical-align:top
}

请注意，您应该注意的唯一事项是在“Personal Bests CSS”的CSS评论下。

3 个答案:

答案 0 :(得分：0)

尝试添加此内容：

.rubyTable, .sapphireTable, .emeraldTable, .diamondTable, .axTable {
    width: 90%;
    margin: 0 auto;
}

答案 1 :(得分：0)

首先，我认为关闭你的

是个好主意 
<p class="TA"> with a </p>,

有了这个，你至少会尝试测试你的CSS属性。

答案 2 :(得分：0)

要将CSS中的块级静态定位对象居中对齐，您可以使用margin:auto; 

.rubyTable, .sapphireTable, .diamondTable {
    /* above; add whatever table class names you need */
    margin:auto;
}

注意：为清楚起见，此速记版本中未指定上/下边距，但阅读the manual on Margin and shorthand CSS syntax是明智的。

自动设置左右边距以使对象居中，在本例中为表格。默认情况下，表是块级元素，其默认宽度为100％，因此最好在此处设置宽度值，以便边距适用于> 0值。

例如，要将设置宽度和设置边距应用于所有表对象，无论其类如何，都可以在CSS中使用表元素类型：

table {
    width:80%;
    margin:auto; 
    min-width:300px; /* for mobile screens */
}

注意上面的＆＃34;表＆＃34;引用不在它之前有一个句号（.），这意味着它是一个元素而不是一个类规则。

重复：

作为额外的一部分，我想通过阅读你的问题，你的HTML代码中有很多重复，例如：

 <table><tr><td class='rubyData'>text</td>

您的HTML中有几十个rubyData类名称引用，但使用direct decendent语法（>）

可以更轻松地使用CSS3动态分配这些引用 
.rubyTable > tr:nth-of-type(1n+3) > td:first-of-type {
    /* this is the same as .rubyTrack CSS */
}
.rubyTable > tr:nth-of-type(1n+3) > td:not(:first-of-type) {
    /* this is the same as .rubyData CSS */
}

第一个规则检查>类的第n个类型的直接后代（由.rubyTable表示），并从类型的第3个中查找每个1个出现。

一旦确定规则，然后检查first-of-type，以便适用于上述定义的第一个td。

然后它会检查首先是td类型的所有其他:not，并为它们应用不同的CSS。 

<table class="rubyTable">
  <tr>
    <th class="rubyHeader" colspan="6">Ruby Cup</th>
  </tr>
  <tr>
    <td class="rubyTitles">Course</td>
    <td class="rubyTitles">Time</td>
    <td class="rubyTitles">Best Lap</td>
    <td class="rubyTitles">Machine</td>
    <td class="rubyTitles">Replay</td>
    <td class="rubyTitles">Rank</td>
  </tr>
  <tr> 
    <td class="rubyTracks">Mute City<br>- Twist Road - </td>
    <td class="rubyData">53"699</td>
    <td class="rubyData">15"645</td>
    <td class="rubyData">Quick Star - G4</td>
    <td class="rubyData">Coming Soon</td>
    <td class="rubyData">46th</td>
  </tr>

变为：

<table class="rubyTable">
  <!-- // FIRST direct child occurance -->
  <tr> 
    <th class="rubyHeader" colspan="6">Ruby Cup</th>
  </tr>
  <!-- //SECOND tr occurance -->
  <tr> 
    <td class="rubyTitles">Course</td>
    <td class="rubyTitles">Time</td>
    <td class="rubyTitles">Best Lap</td>
    <td class="rubyTitles">Machine</td>
    <td class="rubyTitles">Replay</td>
    <td class="rubyTitles">Rank</td>
  </tr>
   <!-- //THIRD of type, so applies to this one and each 1 afterwards.  -->
  <tr> 
    <!-- //First occurance so applies that CSS -->
    <td>Mute City<br>- Twist Road - </td> 
    <!--  //not first so applies alternative CSS rule. -->
    <td>53"699</td>
    <td>15"645</td>
    <td>Quick Star - G4</td>
    <td>Coming Soon</td>
    <td>46th</td>
  </tr>

您会看到第三个<tr>块更加整洁，更小，更简洁，更易于阅读。

相关问题
最新问题