我的表行没有正确对齐。如何实现这一目标？

Question

我有一些HTML标记；我为一条记录创建了每个表，但如img所示。文本不对齐，忽略<% %>里面有泛滥的脚本，我删除洪水脚本是为了容易理解的目的。我想显示在中间，即使字太长，那么它不应该影响下一行。

代码：

       * {
          box-sizing: border-box;
        }

        .row {
          margin-left:-5px;
          margin-right:-5px;
        }
          
        .column {
          float: left;
          width: 32%;
          padding: 5px;
        }
        table {
          border-collapse: collapse;
          border-spacing: 0;
          width: 100%;
          border: 1px solid #ddd;
          style=whitespace-wrap:nowrap;
        }
        tr, td {
         padding: 20px;
          margin-bottom: 10px;
          background-color: #f2f2f2;
          color: #ffffff;
          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2);
          color:#000000;
          whitespace-wrap:nowrap;
        }
        a {
          color:#000000;
        }
         [class*="column"] {
            width: 100%;
            }

 <div class="row">
  <div class="column">
    <table>
        
            <tr>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=rec1%></a></td>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=s1%></a></td>
        </tr>
        </table>
        </div>
      <div class="column">
        <table>
        <tr>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=rec2%></a></td>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=s2%></a></td>
        </tr>
        </table>
        </div>
      <div class="column">
        <table>
        <tr>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=rec3%></a></td>
        <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=s3%></a></td>
        </tr>
        </table>
        </div>
      <div class="column">
        <table>
        <tr>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=rec4%></a></td>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=s4%></a></td>
        </tr>
        </table>
        </div>
      <div class="column">
        <table>
            <tr>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=rec5%></a></td>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=s5%></a></td>
        </tr>
        </table>
        </div>
      <div class="column">
        <table>
        <tr>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=rec6%></a></td>
    <td><a href="https://creatorapp.zoho.com/issportal/application/#Page:htmlview1"><%=s6%></a></td>
        </tr>
        </table>
        </div>
        </div>
     
    <div>No Country  Available!</div>

    </table>

​

​

​

提前谢谢。

Answer 1

我想我明白你说的话了。您应该应用50%的宽度，因为每个宽度都是css

* {
  box-sizing: border-box;
}

.column {
  padding: 5px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ddd;
  width: 100%;
}
tr,
td {
  width: 50%;
  text-align: center;
  padding: 20px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
  color: #000000;
  whitespace-wrap: nowrap;
}
a {
  color: #000000;
}

这是一个Codepen 代码

Answer 2

也许你可以添加标签，然后在你想要的地方关闭它。在您希望具有居中文本的列中添加居中标记。然后，若要不影响其他行，请给您指定中间标记的列的宽度。THis不会影响其他任何事情。