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

【问题标题】：How do I center align all my HTML Tables, and how do I keep all the tables the same width?如何居中对齐所有 HTML 表格，以及如何保持所有表格的宽度相同？
【发布时间】：2016-09-05 06:35:31
【问题描述】：

我遇到了一个问题，我想让所有表格都像“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 注释下。

【问题讨论】：

  • 嗨，斯蒂芬，欢迎来到 SO！请查看编写出色示例的指南stackoverflow.com/help/mcve 如果您将代码简化为保留问题的最小 HTML 和 CSS，它将帮助您查明问题，并使其余部分更容易社区找出如何提供帮助。首先，您可以删除“个人最佳 css”之前的所有 CSS，但您也可以使表格更短，并删除任何不影响问题的 css（颜色、字体、文本样式，甚至可能是填充）。需要一点时间，但这是值得的 :)
  • 表格{宽度：800px;边距：自动； } 将这些行添加到您的 css 代码中，您将得到答案。您可以根据需要更改宽度。

标签： html css html-table


【解决方案1】：

尝试添加这个：

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

【讨论】：

    【解决方案2】：

    首先，我认为关闭您的网站可能是个好主意

    <p class="TA"> with a </p>,

    这样，您至少可以尝试测试您的 CSS 属性。

    【讨论】：

      【解决方案3】：

      要在 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 */
}

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

      重复：

      作为一个额外的部分，我认为阅读您的问题，您的 HTML 代码中有很多重复，例如：

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

      您的 HTML 中有几十个 rubyData 类名引用，但使用 direct decendent 语法 (&gt;) 使用 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 */
}

      第一条规则检查 .rubyTable 类的第 n 个类型的直接后代（由 &gt; 指示），并从第 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>

      您会看到第三个&lt;tr&gt; 块更整洁、更小、更简洁，并且更易于作为代码阅读。

      【讨论】：

        猜你喜欢
        • 2012-11-10
        • 1970-01-01
        • 2010-10-08
        • 1970-01-01
        • 2016-05-31
        • 1970-01-01
        • 2020-12-31
        • 1970-01-01
        • 2014-03-22
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode