Tablesorter 2.17.7 CSS 不工作？答案

【问题标题】：Tablesorter 2.17.7 CSS not working?Tablesorter 2.17.7 CSS 不工作？
【发布时间】：2014-08-21 12:29:11
【问题描述】：

正如标题所说，CSS 不适用于我的表格。我拥有所有 JS 功能，但 CSS 无法正常工作... 我有 3 个文件夹：Includes、Images 和 tablesorter。所有其他页面都在这些文件夹之外（项目根目录）

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="script.js"></script>
<link rel="icon" type="image/png" href="Images/icon.ico"/>

<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:500' rel='stylesheet' type='text/css'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 

**<link href="tablesorter/css/theme.green.css" rel="stylesheet" />**
<script type="text/javascript" src="tablesorter/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="tablesorter/js/widgets/widget-pager.js"></script>

</head>
<body>
    <div class="header-wrapper">

我将 header.php 包含在其他文件中，除了 tablesorter 的 CSS 之外，一切正常。

这是我应用表格排序器的代码的一部分。

<script>
        $(document).ready(function(){ 
            $("#tablica").tablesorter()}
        );
</script>

<table id="table" class="tablesorter">

表有 thead->tr->th 和 tbody->tr->td 并且它是从数据库中填充的... 再说一遍：我有 Javascript 功能，但没有任何 CSS 属性适用..

【问题讨论】：

标签： php css tablesorter

【解决方案1】：

默认情况下，“tablesorter-default”类名应用于表。如果要应用绿色主题，则需要加载“theme.green.css”文件（如上所示）并设置theme 选项：

$("#tablica").tablesorter({
  theme: 'green'
});

或者只是在表格中添加一个“tablesorter-green”类名：

<table id="tablica" class="tablesorter-green">

如果您想应用 jQuery UI 或 Bootstrap 主题，您需要使用“uitheme”小部件，并更改一些不同于默认设置的附加选项。确保同时加载“theme.jui.css”或“theme.bootstrap.css”文件：

$("#tablica").tablesorter({
  theme : 'jui', // theme "jui" or "bootstrap"
  headerTemplate : '{content} {icon}',

  // uitheme widget is contained within the jquery.tablesorter.widgets.js file
  widgets : ['uitheme', 'zebra']
});

【讨论】：