CSS проблема расстояния между границами таблицы - PullRequest
Новая
       0

CSS проблема расстояния между границами таблицы

0 голосов
/ 28 марта 2020

Я пытаюсь выучить некоторые навыки HTML & CSS, и я столкнулся с проблемой, которую я не смог найти правильного решения онлайн.

Я пытаюсь добавить некоторый интервал границ для обеих сторон моего разработанного стола. пожалуйста, смотрите прикрепленные изображения для лучшего понимания

Текущая таблица: https://imgur.com/6eKSfVC

Желаемая таблица: https://imgur.com/Vvafhlg

Мой код: 

<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Deshe Email Monthly Update</title>

    <style>
        table {
            text-align: center;
            font-size: 10pt;
            height: 22px;
            border-radius: 10px;
            box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
            bgcolor="#ffffff";
            font-family: calibri;
            color: #707070;
            width: 50%;
            border-collapse: collapse;



        }

        th, td{
            padding-top: 10px;
            padding-bottom: 10px;

        }

        tr {
            padding-top: 10px;
            padding-bottom: 10px;
            border: solid #1AAE9F;
            border-width: 1px 0;


        }

        tr:first-child {
            border-top: none;
        }

        tr:last-child {
            border-bottom: none;
        }


    </style>

</head>

<body>
    <table>
        <tr>
            <th>Symbol</th>
            <th>Position</th>
            <th>Return</th>
        </tr>
        <tr>
            <td>AAPL</td>
            <td>Short</td>
            <td>40.1%</td>
        </tr>
        <tr>
            <td>AAPL</td>
            <td>Short</td>
            <td>40.1%</td>
        </tr>
        <tr>
            <td>AAPL</td>
            <td>Short</td>
            <td>40.1%</td>
        </tr>
        <tr>
            <td>AAPL</td>
            <td>Short</td>
            <td>40.1%</td>
        </tr>
    </table>
    <br><br><br>


</body>

Не могли бы вы, ребята, помочь мне найти правильное решение?

Спасибо!

Ответы [ 3 ]

0 голосов
/ 28 марта 2020

Надеюсь, что это решит вашу проблему

Добавьте вашу таблицу в div, затем примените padding и box-shadow к полю (div). 

table {
            text-align: center;
            font-size: 10pt;
            height: 22px;
            width:100%;
            font-family: calibri;
            color: #707070;
            border-collapse: collapse;
        }

        th, td{
           padding-top: 10px;
           padding-bottom: 10px;
        }

        tr {
            padding-top: 10px;
            padding-bottom: 10px;
            border: solid #1AAE9F;
            border-width: 1px 0;
        }

        tr:first-child {
            border-top: none;
        }

        tr:last-child {
            border-bottom: none;
        }
        .table-box {
          padding:20px;
          border-radius: 10px;
          box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
        }
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Deshe Email Monthly Update</title>
</head>

<body>
    <div class="table-box">
         <table>
            <tr>
                <th>Symbol</th>
                <th>Position</th>
                <th>Return</th>
            </tr>
            <tr>
                <td>AAPL</td>
                <td>Short</td>
                <td>40.1%</td>
            </tr>
            <tr>
                <td>AAPL</td>
                <td>Short</td>
                <td>40.1%</td>
            </tr>
        </table>
    </div>
</body>
</html>
0 голосов
/ 28 марта 2020 

.table-wrapper {
  display: flex;
  width: 50vw;
  max-width: 300px;
}
.table-theme {
  padding: 0.5em 2em;
  border-radius: 10px;
  box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
  font-size: 12px;
}
.table-theme caption {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.5em;
}
.table-theme > table {
  text-align: center;
  font-size: 10pt;
  height: 22px;
  background-color: "#ffffff";
  font-family: Calibri;
  color: #707070;
  border-collapse: collapse;
  width: 100%;
}
.table-theme tbody tr {
  padding: 0 75em;
  border: solid #1AAE9F;
  border-width: 1px 0;
}

.table-theme tbody tr:last-child {
  border-bottom: none;
}

.table-theme thead th  {
  padding: 0.25em 0;
}

.table-theme tbody td {
  padding: 0.75em 0;
}

/* example */
.table-theme td[data-th="Symbol"] {
  font-size: 1.1em;
}
.table-theme th[title="Return"],
.table-theme td[data-th="Return"] {
  color: green;
  font-weight: bold;
}
<div class="table-theme table-wrapper">
  <table>
    <caption>Februari biggest gainers</caption>
    <thead>
      <tr>
        <th title="Symbol">Symbol</th>
        <th title="Position">Position</th>
        <th title="Return">Return</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-th="Symbol">AAPL</td>
        <td data-th="Postion">Short</td>
        <td data-th="Return">40.1%</td>
      </tr>
      <tr>
        <td data-th="Symbol">AAPL</td>
        <td data-th="Postion">Short</td>
        <td data-th="Return">40.1%</td>
      </tr>
      <tr>
        <td data-th="Symbol">AAPL</td>
        <td data-th="Postion">Short</td>
        <td data-th="Return">40.1%</td>
      </tr>
      <tr>
        <td data-th="Symbol">AAPL</td>
        <td data-th="Postion">Short</td>
        <td data-th="Return">40.1%</td>
      </tr>
    </tbody>

  </table>
</div>
0 голосов
/ 28 марта 2020

Вот ваше решение, попробуйте так, как оно вам поможет. 

 .main-card {
            padding: 10px 30px;
            box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
            width: 50%;
            border-radius: 10px;
        }
        
        table {
            width: 100%;
            text-align: center;
            font-size: 10pt;
            height: 22px;
            background-color: #ffffff;
            font-family: calibri;
            color: #707070;
            border-collapse: collapse;
        }
        
        th,
        td {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        
        tr {
            padding-top: 10px;
            padding-bottom: 10px;
            border: solid #1AAE9F;
            border-width: 1px 0;
        }
        
        tr:first-child {
            border-top: none;
        }
        
        tr:last-child {
            border-bottom: none;
        }
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Deshe Email Monthly Update</title>

</head>

<body>
    <div class="main-card">
        <table>
            <tr>
                <th>Symbol</th>
                <th>Position</th>
                <th>Return</th>
            </tr>
            <tr>
                <td>AAPL</td>
                <td>Short</td>
                <td>40.1%</td>
            </tr>
            <tr>
                <td>AAPL</td>
                <td>Short</td>
                <td>40.1%</td>
            </tr>
            <tr>
                <td>AAPL</td>
                <td>Short</td>
                <td>40.1%</td>
            </tr>
            <tr>
                <td>AAPL</td>
                <td>Short</td>
                <td>40.1%</td>
            </tr>
        </table>
    </div>


</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...