Question

我在桌面上设置了table-layout: fixed;，但每个单元格中的字词都被分成了一个新行。

Eg:

Applicatio
n

Instead of:

 Application

我确实尝试了添加white-space: nowrap;无效的解决方案suggested here

问题： 如何防止固定布局表格单元格中断字？

表格布局：

             <table  id="escalation" class="table table-striped table-bordered" cellspacing="0">


                <thead>
                    <tr>
                        <th style="display:none">ID</th>
                        <th>RID</th>
                        <th>Asset Name</th>    
                    </tr>
                </thead>
                <tbody>

                        <tr>
                            <td>1</td>
                            <td class="td-limit">102345</td>
                            <td class="td-limit">Application Testing Break</td> 
                        </tr>

                </tbody>
            </table>

CSS：

#escalation {

    table-layout: fixed;
}

#escalation th {
    overflow: auto;
    font-size: 10px;
    color: #000000;
    border-right: 1px solid #7591ac;
}
.td-limit {
    overflow: auto;
    font-size: 11px;
    max-width: 220px;
    overflow: hidden;
    word-wrap: break-word;
}

Answer 1

将CSS word-break:keep-all 应用于单元格。

<table  id="escalation" class="table table-striped table-bordered" cellspacing="0">


                <thead>
                    <tr>
                        <th style="display:none">ID</th>
                        <th>RID</th>
                        <th>Asset Name</th>    
                    </tr>
                </thead>
                <tbody>

                        <tr>
                            <td>1</td>
                            <td class="td-limit">102345</td>
                            <td class="td-limit">Application Testing Break</td> 
                        </tr>

                </tbody>
            </table>

import java.util.Scanner;

public class courseInfo {
   public static int courseInfo(int[] list, int key) {

      Scanner input = new Scanner(System.in);

      // Input course name
      System.out.print("Enter course name: (Ex. COP 2800) ");
      double courseInput = input.nextDouble();

      for (int i = 0; i < list.length; i++) {
         if (key == list[i])
            return i;

         }
         return -1;
      }

      public static void main(String[] args) {
         int[] list = {COP 2800, PSY 1012, EVR 2001, COP 1000};
         System.out.println(linearSearch(list, courseInput));
   }
}

Answer 2

您需要将white-space: nowrap;添加到.td-limit

#escalation {

    table-layout: fixed;
}

#escalation th {
    overflow: auto;
    font-size: 10px;
    color: #000000;
    border-right: 1px solid #7591ac;
}
.td-limit {
    overflow: auto;
    font-size: 11px;
    max-width: 220px;
    overflow: hidden;
    word-wrap: break-word;
    white-space: nowrap;
}

<table id="escalation" class="table table-striped table-bordered" cellspacing="0">


  <thead>
    <tr>
      <th style="display:none">ID</th>
      <th>RID</th>
      <th>Asset Name</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>1</td>
      <td class="td-limit">102345</td>
      <td class="td-limit">Application Testing Break</td>
    </tr>

  </tbody>
</table>

如何防止固定布局表格单元格中的分词？

2 个答案: