如何使数据表内的填充可点击[重复]答案

【问题标题】：How to make padding clickable inside the datatables [duplicate]如何使数据表内的填充可点击[重复]
【发布时间】：2017-09-29 05:29:34
【问题描述】：

我进行了很多搜索并阅读了有关使填充可点击的不同问题，但我找不到有关datatables 单元格填充的信息。我想知道我怎样才能使这成为可能。我附上了我想让green部分可点击的截图。

我想再问一件事是rowlink.js 插件将使用数据表与数据库一起工作。如果可能的话，请给我一个简单的例子来理解这一点。我试过了，但rowlink.js 的所有功能都不适用于datatables。谢谢:)

    <?php

    $con = mysql_connect( 'localhost', 'root', '' )or die( 'can not connect to server' . $conn->connect_error );
    if ( $con ) {
        mysql_select_db( 'syspos', $con )or die( 'can not seletc the database' . $conn->connect_error );
    }
    $sql = "SELECT * FROM tbproduct";
    $result = mysql_query($sql);

    ?>

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Clickable Paddind</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">


<style>

    td a { 
   display: block;      
}




td {
    border-left: none !important;
    border-right: none !important;
    border-bottom-width: 1px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;


}


    tbody:hover tr:hover td  {
        background-color:   #A9A9A9;
    }   
    tbody:hover tr:hover a {
        color: white;

    }



    </style>
</head>

<body>
<br><br>

<div class="container">
    <div class="table-responsive">
    <table id="data" class="table table-striped table-bordered">
        <thead>
            <tr>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
            </tr>
        </thead>
        <tbody id="my" data-link="row" class="rowlink">
        <?php
            while($row = mysql_fetch_array($result))    
                  {
                    echo '

                    <tr>

                        <td id="one"  ><a href="#">'.$row["cat_id"].'</a></td>
                        <td id="two" ><a href="#">'.$row["product_name"].'</a></td>
                        <td id="three" ><a href="#">'.$row["quantity"].'</a></td>


                    </tr>'; 

                  }
                    ?>
        </tbody>            
        </table>

    </div>

</div>


</body>
</html>
<script>

$(document).ready(function() {
    $('#data').DataTable();
} );

</script>

【问题讨论】：

在 CSS 中，将 td{padding: xpx;} 更改为 td a{padding : xpx;}
@Znaneswar 它的默认数据表填充，我该如何更改？

标签： javascript css twitter-bootstrap plugins datatables

【解决方案1】：

使用Znaneswar想法：

我已修改您的示例以创建小提琴：https://jsfiddle.net/nrfsgs0x/2/

如果你删除 css，运行 fiddle 并在 td 元素上打开开发工具，你会发现 padding: 8px 来自 bootstrap.css 作为选择器 .table>tbody>tr>td 的样式

要覆盖它，您需要使用padding: 0 提供更具体的选择器。诀窍是在类名中添加标签，使选择器看起来像table.table tbody tr td。

然后你需要将padding: 8px添加到a。有关详细信息，请参阅小提琴。

附：实际上，我建议您在表中添加一个特定的类，并将该类用作 css 中的命名空间，以避免将特定表的特定样式泄漏到 html 页面中您可能不需要它们的其他位置。我先做了，然后修改了小提琴以使其尽可能接近您的代码。你可以参考第一个版本的小提琴来理解我的意思：https://jsfiddle.net/nrfsgs0x/0/

【讨论】：