代码之家  ›  专栏  ›  技术社区  ›  yasarui

HTML表格不带TD内容的正文滚动分为多行

css html javascript
  •  1
  • yasarui  · 技术社区  · 7 年前

    我有一张桌子,需要有一个固定的标题和tbody滚动。我在stackoverflow中找到了很多解决方案,这有很大帮助,但我面临的问题是,th和td中的内容正在分成多行。

    当没有为滚动条添加CSS时,不会发生这种情况。

    我想应用滚动条以及内容不应该分割成多行。伙计们,请帮助我如何实现这一点,而不应用很多内联样式到TDS。 

    文档类型HTML>
<HTML>

<头部>
<meta charset=“utf-8”>
<meta name=“viewport”content=“width=device width,initial scale=1,shrink to fit=no”>
<title>物化.css管理数据表</title>
<!--编译并缩小CSS-->
<link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css”>
<link href=“https://fonts.googleapis.com/icon?”族=材质+图标“rel=”stylesheet“>
<样式>
#产品表车身{
显示:块;
高度:400px;
溢出:自动;
}

#产品表Thead,
#产品表tBody tr{
显示:表格;
宽度:100%;
台面布置:固定;
}

#产品表{
边框:1px实心rgba(0,0,0,0.12);
宽度:100%;
}
</style>
</head>

<正文>
<div class=“container”>
<table id=“products table”class=“bordered products table centraled”>
<thead>
<tr>
<th>S.编号</th>
<th>产品名称</th>
<th>产品类别</th>
<th>税名</th>
<th>税(%)lt;/th>
<th>税值</th>
<th>产品价格</th>
<th>含税价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id=“Products Table tbody”>
<tr>
<td>1</td>
<td>aloo chaat masala</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>杜巴里</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>蔬菜堆</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>4</td>
<td>地中海烧烤</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>99.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>103.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>5</td>
<td>蘑菇混合泳</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>6</td>
<td>烧烤农家干酪</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>99.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>103.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>7</td>
<td>查帕塔·帕内尔·布尔吉</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>99.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>103.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>8</td>
<td>烤鸡</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>5.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>109.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>114.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>9</td>
<td>葡萄牙语烧烤Chorizo</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>6.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>129.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>135.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>10</td>
<td>拉鸡tandoori</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>5.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>109.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>114.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>11</td>
<td>波洛a la caccitore</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>5.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>119.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>124.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>1</td>
<td>aloo chaat masala</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>11</td>
<td>杜巴里</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>12</td>
<td>蔬菜堆</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>13</td>
<td>地中海烧烤</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>99.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>103.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>14</td>
<td>蘑菇混合泳</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>89.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>93.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>15</td>
<td>烧烤农家干酪</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>99.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>103.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>16</td>
<td>查帕塔·帕内尔·布尔吉</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>4.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>99.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>103.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>17</td>
<td>烤鸡</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>5.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>109.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>114.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>18</td>
<td>葡萄牙语烧烤Chorizo</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>6.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>129.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>135.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>19</td>
<td>拉鸡tandoori</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>5.45</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>109.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>114.45</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
<tr>
<td>20</td>
<td>波洛a la caccitore</td>
<td>烧烤</td>
<td>消费税</td>
<td>5</td>
<td>5.95</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>119.00</td>
<td>
<i class=“fas fa inr”aria hidden=“true”></i>124.95</td>
<td>
<button class=“btn small”>
<i class=“material icons right”>编辑</i>
</button>
<button class=“btn小红”>
<i class=“material icons right”>删除</i>
</button>
</td>
</tr>
</t车身>
</table>
</DIV>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<!--编译和缩小的javascript-->
<script src=“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js”></script>
<!--薄型卷轴——>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery slimscroll/1.3.8/jquery.slimscroll.min.js”></script>
</body>

</html>>=
    



    enter image description here
    


    当没有为滚动条添加CSS时,不会发生这种情况。
    


    enter image description here
    


    我想应用滚动条以及内容不应该分割成多行。伙计们,请帮助我如何实现这一点,而不应用很多内联样式到TDS。
    


    

    

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title> Materialize.css Admin Data Table </title>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    #products-table tbody {
      display: block;
      height: 400px;
      overflow: auto;
    }
    
    #products-table thead,
    #products-table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    
    #products-table {
      border: 1px solid rgba(0, 0, 0, 0.12);
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="container">
    <table id="products-table" class="bordered products-table centered">
      <thead>
        <tr>
          <th>S.No</th>
          <th>Product Name</th>
          <th>Product Category</th>
          <th>Tax Name</th>
          <th>Tax(%)</th>
          <th>Tax Value</th>
          <th>Product Price</th>
          <th>Price With Tax</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="products-table-tbody">
        <tr>
          <td>1</td>
          <td>Aloo Chaat Masala</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>Du Barry</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>Vegetable Stacks</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>Grilled Mediterranean</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>5</td>
          <td>Mushroom Medley</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>6</td>
          <td>BBQ Cottage Cheese</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>7</td>
          <td>Chatpata Paneer Bhurji</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>8</td>
          <td>Grilled Chicken</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>5.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>9</td>
          <td>Portuguese BBQ Chorizo</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>6.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>129.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>135.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>10</td>
          <td>Pulled Chicken Tandoori</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>5.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>11</td>
          <td>Pollo A LA Caccitore</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>5.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>119.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>124.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>1</td>
          <td>Aloo Chaat Masala</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>11</td>
          <td>Du Barry</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>12</td>
          <td>Vegetable Stacks</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>13</td>
          <td>Grilled Mediterranean</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>14</td>
          <td>Mushroom Medley</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>15</td>
          <td>BBQ Cottage Cheese</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>16</td>
          <td>Chatpata Paneer Bhurji</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>4.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>17</td>
          <td>Grilled Chicken</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>5.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>18</td>
          <td>Portuguese BBQ Chorizo</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>6.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>129.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>135.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>19</td>
          <td>Pulled Chicken Tandoori</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>5.45</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
        <tr>
          <td>20</td>
          <td>Pollo A LA Caccitore</td>
          <td>Grill</td>
          <td>GST</td>
          <td>5</td>
          <td>5.95</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>119.00</td>
          <td>
            <i class="fas fa-inr" aria-hidden="true"></i>124.95</td>
          <td>
            <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
            <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <!-- Slim Scroll -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
</body>

</html>
    2 回复  |  直到 7 年前
        1
  •  0
  •   Ullas Hunka    7 年前 

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Materialize.css Admin Data Table </title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        #products-table tbody{
            display:block;
            height:400px;
            overflow:auto;
        }
         #products-table thead tr th,
        #products-table tbody tr td{
               overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
        }
        #products-table thead,
        #products-table tbody tr{
            display:table;
            width:100%;
            table-layout:fixed;
        }
        #products-table{
            border:1px solid rgba(0,0,0,0.12);
            width:100%;
        }
    </style>
</head>
<body>
    <div class="container">
    <table id="products-table" class="bordered products-table centered">
        <thead>
            <tr>
                <th>S.No</th>
                <th>Product Name</th>
                <th>Product Category</th>
                <th>Tax Name</th>
                <th>Tax(%)</th>
                <th>Tax Value</th>
                <th>Product Price</th>
                <th>Price With Tax</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="products-table-tbody">
            <tr>
                <td>1</td>
                <td>Aloo Chaat Masala</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Du Barry</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Vegetable Stacks</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grilled Mediterranean</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Mushroom Medley</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>BBQ Cottage Cheese</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>Chatpata Paneer Bhurji</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>8</td>
                <td>Grilled Chicken</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>5.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>9</td>
                <td>Portuguese BBQ Chorizo</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>6.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>129.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>135.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>10</td>
                <td>Pulled Chicken Tandoori</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>5.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>11</td>
                <td>Pollo A LA Caccitore</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>5.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>119.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>124.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>Aloo Chaat Masala</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>11</td>
                <td>Du Barry</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>12</td>
                <td>Vegetable Stacks</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>13</td>
                <td>Grilled Mediterranean</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>14</td>
                <td>Mushroom Medley</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>89.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>93.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>15</td>
                <td>BBQ Cottage Cheese</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>16</td>
                <td>Chatpata Paneer Bhurji</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>4.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>99.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>103.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>17</td>
                <td>Grilled Chicken</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>5.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>18</td>
                <td>Portuguese BBQ Chorizo</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>6.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>129.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>135.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>19</td>
                <td>Pulled Chicken Tandoori</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>5.45</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>109.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>114.45</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
            <tr>
                <td>20</td>
                <td>Pollo A LA Caccitore</td>
                <td>Grill</td>
                <td>GST</td>
                <td>5</td>
                <td>5.95</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>119.00</td>
                <td>
                    <i class="fas fa-inr" aria-hidden="true"></i>124.95</td>
                <td>
                    <button class="btn-small">
                                    <i class="material-icons right">edit</i>
                                </button>
                    <button class="btn-small red">
                                    <i class="material-icons right">delete</i>
                                </button>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <!-- Slim Scroll -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
</body>

</html>
        2
  •  0
  •   vcaraccio    7 年前 

    td {
  white-space: nowrap
}

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    10 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    10 月前
    magenta placenta  ·  将css变量合并为一个变量
    10 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    11 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    11 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    11 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    11 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    11 月前
    Luckkks  ·  过渡色工作不正常
    11 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    11 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号