테이블 행 높이 설정

테이블 행 높이 설정

내가 가지고 있는 코드는 다음과.

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

행이 너무 멀리 떨어져 있습니다.줄이 좀 더 가까이 닿기를 원합니다.

제가 한 일은 다음 CSS를 추가하는 것이었는데, 아무것도 바뀌지 않는 것 같습니다.

.topics tr { height: 14px; }

내가 뭘 잘못하고 있는 거지?

시도해 보십시오.

.topics tr { line-height: 14px; }

속성 설정을 시도합니다.td그래서:

.topic td{ height: 14px };

제 목적에 맞는 최선의 답은 다음과 같습니다.

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

그white-space: nowrap행의 셀이 여러 줄에 걸쳐 끊어지는 것을 방지하기 때문에 중요합니다.

저는 개인적으로 덧붙이는 것을 좋아합니다.text-overflow: ellipsis나에게th그리고.td후행 전체 중지를 추가하여 오버플로 텍스트를 더 보기 좋게 만드는 요소(예:Too long gets dots...

저는 패딩을 사용하기로 했습니다.필요한 것이 정확하지는 않지만 경우에 따라 유용할 수도 있습니다.

table td {
    padding: 15px 0;
}

당신이 a를 놓는다면 당신은 또한 약간의 여분의 간격을 없앨 수 있습니다.border-collapse: collapse;테이블에 CSS 문이 있습니다.

선 높이는 내용의 현재 높이보다 클 때만 작동합니다.<td>. 50x50 아이콘이 테이블에 있다면,tr선 높이는 행을 50°(+ 패딩)보다 작게 만들지 않습니다.

패딩을 이미 설정했으므로0다른 것이 틀림없지만,
예를 들어 내부의 큰 글꼴 크기td그것은 당신의 14인치보다 더 큽니다.

부트스트랩을 사용하는 경우,padding당신의tds.

다음은 여러 개의 테이블이 있으므로 일부 마이너 js가 필요한 경우 테이블 행(tr)을 확장/축소합니다.매우 적은 코딩 IMO

function row_expand_collapse(e){

  //get table id so you know what table to manipulate row from
  const tableID = e.parentNode.parentNode.id;

  //get row index and increment by 1 so you know what row to expand/collapse
  const i = e.rowIndex + 1;

  //get the row to change the css class on
  let row = document.getElementById(tableID).rows[i]

  // Add and remove the appropriate  css classname to expand/collapse the row

  if (row.classList.contains('row-collapse')){
    row.classList.remove('row-collapse')
    row.classList.add('row-expand')
    return
  }
  if (row.classList.contains('row-expand')){
    row.classList.remove('row-expand')
    row.classList.add('row-collapse')
    return
  }
}

.row-collapse td{
  padding: 0px 0px;
  line-height: 0px;
  white-space: nowrap;
  overflow: hidden;
  transition-duration: .75s;
}
.row-expand td {
  line-height: 100%;
  transition-duration: .75s;
}
table, th, td{
  width: 75%;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 15px 15px;
  margin: 15px 15px;
  text-align: center;
}

            <table id="Table-1">
                <thead>
                    <tr>
                        <th colspan="10">TABLE 1</th>
                    </tr>
                </thead>
                <tbody id="Tbody-1">
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 1 - Click Me to See Row 2</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 2</td>
                    </tr>
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 3 - Click Me to See Row 4</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 4</td>
                    </tr>
                </tbody>
            </table>

            
            <table id="Table-2">
                <thead>
                    <tr>
                        <th colspan="10">TABLE 2</th>
                    </tr>
                </thead>
                <tbody id="Tbody-2">
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 1 - Click Me to See Row 2</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 2</td>
                    </tr>
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 3 - Click Me to See Row 4</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 4</td>
                    </tr>
                </tbody>
            </table>

인라인 CSS를 사용하여 특정 값 행의 높이를 다음과 같이 수정해야 합니다.

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

뭔가.height의row에 달려 있습니다height의td. 그래서 저희가 좀.div그리고 세트height거기까지div고치다height의row.

예:

td.table-column > div.item {
  height: 20px;
  overflow:hidden;
  background-color: lightpink;
}

  <table>
    <tr>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
    </tr>
</table>

이거 한번 해보세요.

{
   line-height: 15px;  //or
   height:15px;        //or
   padding: 5px 5px;   
}

저를 위해 일했습니다.

언급URL : https://stackoverflow.com/questions/6398172/setting-table-row-height