Свертывание начальной загрузки в таблицах - проблемы с границами и заполнением - PullRequest
Новая
       56

Свертывание начальной загрузки в таблицах - проблемы с границами и заполнением

0 голосов
/ 25 октября 2019

У меня есть стол с другим столом в нем. Это div с классом коллапса из начальной загрузки. Так что я могу свернуть его кнопкой в ​​первом ряду.

Проблема заключается в следующем:

  1. Мне нужна только красная граница, когда она активна. Черный должен исчезнуть. Возможно ли без js?

  2. Нужно ли мне самостоятельно настраивать заполнение, чтобы каждая ячейка находилась между собой? Или есть другое решение для этого?

  3. Вы бы сделали то же самое?

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

enter image description here

table {
  width: 800px;
}

tr {
  background-color: darkgray;
}

td {
  padding:10px;
}

.tr-info {
  border-bottom: 1px solid black;
}

.mybutton {
  width: 10%;
  height: 10%;
  font-size: 2px;
}

.hiddenRow {
  padding: 0;
}

.hiddenRow th {
  border-top: 1px solid red;
}
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Website</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="../style.css" media="screen" />


</head>

<body style="background: light-grey;">

  <div class="container mt-5">

    <div class="row">
      <div class="col-12">
        <table>
          <tbody>
            <tr class="tr-info">
              <td>
                som1
              </td>
              <td>
                some2
              </td>
              <td>
                <button class="mybutton" type="button" data-toggle="collapse" data-target="#dodo" aria-expanded="false" aria-controls="collapseExample">
                                    Button with data-target
                                </button>
              </td>
            </tr>
            <tr>
              <td colspan="3" class="hiddenRow">
                <div class="collapse" id="dodo">
                  <table>
                    <thead>
                      <tr class="tr-info">
                        <th>dodo</th>
                        <th>dodo2</th>
                        <th>status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="tr-info">
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

              </td>

            </tr>
            <tr class="tr-info">
              <td>dodo</td>
              <td>d</td>
              <td>d</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

1 Ответ

1 голос
/ 25 октября 2019

Набор 

td ,th{
  min-width: 110px;
  padding:10px;
}

Для выравнивания таблицы

Для границы 

div#dodo {
    margin-top: -1px;
    z-index: 111;
    position: relative;
}
...