在bootstrap3中適當地安裝表格

我有這張簡單的表格。我如何防止表格溢出面板的邊界？當包含的表格中的單元格數據過長時，在引導程序中處理此問題的正確方法是什麼？我看着在這裏表示例小組寫什麼，我有：在bootstrap3中適當地安裝表格

我相信我現在用的是最外面的「容器」 DIV錯誤以及我直接應用行類吧。

body { 
 
    font-family: 'Oxygen', sans-serif; 
 
    background-color: #3F88BF; 
 
} 
 

 
.table-condensed { 
 
    font-size: 12px; 
 

 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content="{{ description }}" /> 
 
    <title>{{title}}</title> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="css/styles.css"> 
 

 
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <div class="container col-sm-10 col-sm-offset-1"> <!-- div container --> 
 
     <div class="page-header"> 
 
      <h1 id="top">Some title</h1> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-body"> 
 
       <h1 id="abc">ABC</h1> 
 
       <a class="pull-right" href="#top">top</a> 
 
      </div> 
 
      <table class="table table-bordered table-condensed table-striped"> 
 
       <thead> 
 
        <tr> 
 
         <th>Head1</th> 
 
         <th>Head2</th> 
 
         <th>Head3</th> 
 
         <th>Head4</th> 
 
         <th>Head5</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td>Data1</td> 
 
         <td>Data2</td> 
 
         <td>Data3</td> 
 
         <td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
</body> 
 
</html>

來源

2017-07-18 abc

如果你的數據是時間太長，應該使用text-overflow: ellipsis;解決。它將呈現一個省略號（「...」）來表示剪切文本。所以你的表格單元格不會溢出。您還必須使用table-layout: fixed。

如果您使用table-layout: fixed - 表格和列的寬度由表和列元素的寬度或第一行單元格的寬度設置。後續行中的單元格不會影響列寬。

修改的摘錄

body { 
 
    font-family: 'Oxygen', sans-serif; 
 
    background-color: #3F88BF; 
 
} 
 

 
.table-condensed { 
 
    font-size: 12px; 
 

 
} 
 
.table { 
 
    table-layout:fixed; 
 
} 
 

 
.table td { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 

 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content="{{ description }}" /> 
 
    <title>{{title}}</title> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="css/styles.css"> 
 

 
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <div class="container col-sm-10 col-sm-offset-1"> <!-- div container --> 
 
     <div class="page-header"> 
 
      <h1 id="top">Some title</h1> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-body"> 
 
       <h1 id="abc">ABC</h1> 
 
       <a class="pull-right" href="#top">top</a> 
 
      </div> 
 
      <table class="table table-bordered table-condensed table-striped"> 
 
       <thead> 
 
        <tr> 
 
         <th>Head1</th> 
 
         <th>Head2</th> 
 
         <th>Head3</th> 
 
         <th>Head4</th> 
 
         <th colspan="4">Head5</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td>Data1</td> 
 
         <td>Data2</td> 
 
         <td>Data3</td> 
 
         <td >Data4</td> <td colspan="4">Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
</body> 
 
</html>

來源

2017-07-18 01:24:23 neophyte

很抱歉，這也不太工作。 'table-layout：fixed;'導致我的頭部嵌套表格被擠壓。和'文字溢出：省略號; 溢出：隱藏;沒有它沒有任何效果。 – abc

嘗試使用上斜頭上的跨度。這可能會有所幫助。我編輯了我的答案片段檢查是否有幫助。 – neophyte

你需要讓，並在最後一列使用word-wrap: break-word;，因爲最後一列包含單個單詞太長。

body { font-family: 'Oxygen', sans-serif; background-color: #3F88BF; } 
 
.table-condensed { font-size: 12px; table-layout: fixed;} 
 
.table-condensed td {word-wrap: break-word;}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content="{{ description }}" /> 
 
    <title>{{title}}</title> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="css/styles.css"> 
 

 
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <div class="container col-sm-10 col-sm-offset-1"> <!-- div container --> 
 
     <div class="page-header"> 
 
      <h1 id="top">Some title</h1> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-body"> 
 
       <h1 id="abc">ABC</h1> 
 
       <a class="pull-right" href="#top">top</a> 
 
      </div> 
 
      <table class="table table-bordered table-condensed table-striped"> 
 
       <thead> 
 
        <tr> 
 
         <th>Head1</th> 
 
         <th>Head2</th> 
 
         <th>Head3</th> 
 
         <th>Head4</th> 
 
         <th>Head5</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td>Data1</td> 
 
         <td>Data2</td> 
 
         <td>Data3</td> 
 
         <td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
</body> 
 
</html>

來源

2017-07-18 08:45:56

在bootstrap3中適當地安裝表格

回答

相關問題