时间戳

首页 > 解决方案 > 我不能改变桌子的位置

html - 我不能改变桌子的位置

问题描述

我创建了表格，我想改变它的位置。在这一点上，我根本无法改变位置，所以我相信方向并不重要。我已经在 .first_table 上尝试了边距和填充（我给了这个类的表），但它根本不起作用。我尝试更改显示属性和位置属性，但它们也不起作用。他们只会使情况恶化。尽管这两个属性可能只会使情况恶化，因为我无法正确使用它们。下面是表格的css和html代码：

.first_table{
  color: #ad0720;
}

.first_table th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: left;
  color: #ad0720;
}

.first_table td {
  font-weight: normal;
  font-size: 1em;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.first_table {
  text-align: left;
  overflow: hidden;
  width: 50%;
  margin: 50 50;
  display: table;
  padding-bottom: 50px;
}

.first_table td, .first_table th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


.first_table tr:nth-child(odd) {
  background-color: #323C50;
}


.first_table tr:nth-child(even) {
  background-color: #2C3446;
}

.first_table th {
  background-color: #1F2739;
}

.first_table td:first-child {
  color: #FB667A;
}

.first_table tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.first_table td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}
<table class="first_table">
      <thead>
        <tr>
          <th>უნარები&lt;/th>
          <td>Python</td>
          <td>Web Development</td>
          <td>Red Hat/CentOS</td>
          <td>Algorithms & Data Structures</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>შეფასება</th>
          <td>⭐⭐⭐&lt;/td>
          <td>⭐,⭐/2</td>
          <td>⭐&lt;/td>
          <td>⭐⭐⭐&lt;/td>
        </tr>
      </tbody>
    </table>

标签： htmlcsscss-position

解决方案

用 id 或 class将表格包装在 a<div>中，然后添加 aposition:relative和边距/填充。经测试，有效。

推荐阅读