잡동사니

확대 / 축소시 표 이동 방지-CSS

카테고리 없음
2020. 8. 8. 01:23
반응형

질문

.안녕하세요, 축소하면 마지막 테이블이 다음 행으로 이동합니다. 테이블이 다음 행으로 이동하지 않도록 레이아웃을 수정하는 방법이 있습니까? 이 문제를 해결할 수 있도록 조언이나 해결 방법을 제공해 주시겠습니까?나는 많은 것을 시도했지만 불행히도 해결책을 찾을 수 없습니다. 모든 지원과 의견에 미리 감사드립니다.

table {
  width: 100%;
}

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

.blocks {
  display: block;
  position: relative;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}
<div class="blocks">
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>

        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
</div>
Expand snippet


답변1

.blocks 의 display 를 flex 로 설정하여 모든 테이블을 한 행에 유지합니다.



답변2

분명히 브라우저는 매우 작은 크기에서 다른 콘텐츠와 다르게 테이블을 확장합니다. 따라서 행당 세 개의 항목을 강제하는 솔루션이 필요합니다. CSS에서이를 처리하는 몇 가지 방법이 있습니다.

첫 번째는 CSS Grid 를 사용합니다. 아래에서 .blocks 에 대한 변경 사항을 참조하십시오. IE11은 Grid 지원이 제한되어 있으므로 해당 브라우저에서 작동하려면 CSS를 추가해야 할 수도 있습니다.

table {
  width: 100%;
}

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

.blocks {
  display: inline-grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}
<div class="blocks">
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>

        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
  <div class="block">
    <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
      <tr>
        <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
      </tr>
      <tr>
        <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
      </tr>
      <tr>
        <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
      </tr>
    </table>
  </div>
</div>
Expand snippet

모든 브라우저에서 작동하는 또 다른 해결책은 중첩 된 테이블을 사용하는 것입니다.

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}
<table>
  <tr>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>

          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="table-responsive" id="customers" colspan="7" style="float: left; margin-left: 15px;">
        <tr>
          <td width="100" style="font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; font-size:11px; 1px solid #000000;">Status</td>
        </tr>
        <tr>
          <td width="100"><span class="vork">1:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 25362541</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">2:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 6545645641</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">53:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465463</span></td>
        </tr>
        <tr>
          <td width="100"><span class="vork">4:</span>&nbsp;&nbsp;<span class="nachkomma">Testtask 4846465464</span></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Expand snippet



 

 

 

 

출처 : https://stackoverflow.com/questions/62686155/prevent-tables-to-move-when-zooming-css

반응형
저작자표시

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band
댓글

티스토리툴바