相关疑难解决方法(0)

我生成使用打印报告table在Twitter的引导布局.

我tbody内心有多个table;

虽然page-break-after每个都需要印刷tbody

所以我已经应用了print-css

@media print {
    tbody{
        page-break-after: auto;
        page-break-inside: avoid;
        border: none !important;
        margin-bottom: 20px !important;
    }
}

问题

• 在应用样式page-break-after时tbody,分页功能无法正常工作,请参阅此处

• 但是当应用display:block到tbody给我想要的结果,但表的布局正在发生变化后扭曲tbody display:table-row-group,以display:block 看到这里

我想在tbody使用后打破页面page-break-after: auto;.

情景如下

使用CSS在鼠标悬停时更改表格中行的背景颜色非常简单:

.HighlightableRow:hover
{
  background-color: lightgray;
}

还有一些HTML:

<table>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
</table>

偶尔,当我将鼠标悬停在其中任何一个上时,我想突出显示一对行.例如,当在表格中显示工作单列表时,我会有一行包含创建者,创建日期,紧急程度等,第二行除了要求的工作外.

除了使用JavaScript onmouseover/onmouseout事件处理程序之外,还有什么方法可以像上面显示的那样创建这种效果吗？最好使用CSS.

我有一张比较长的桌子.每条记录有六行.因此标识符为16的项目具有<tr-16-1><tr-16-2>.....<tr-16-6>标识符25 <tr-25-1><tr-25-2>.....<tr-25-6>,等等.

我希望分页符不分割六行中的任何分组.因此,如果<tr-25-6>继续在新页面上,我希望所有人<tr-25's>都能打破它.

如果有帮助的话,我可以轻松地将一个类附加到所有六行.任何人都可以指出我正确的方向如何做到这一点？非常感谢你的帮助.

HTML规范允许表中包含多个 tbody元素。我有这样的情况，Firefox似乎不想处理塌陷的边框。

http://jsfiddle.net/hunvjrp4/

在Chrome 37中，第二个表格上的边框可以正确显示，但在Firefox 33或Internet Explorer 11中，边框不会太热。

基本上，看起来是否存在任何tbody包含（仅？）隐藏内容的内容，那么它将无法正确显示整个表格的边框。

是否有一种解决方法可以正确绘制边界？

我尝试过不折叠边框，这似乎可行，但是使此特定表看起来与网站上的其他表不同。

上面链接的小提琴的代码示例：

With multiple `tbody` elements:
<table class="mainContent">
    <thead><tr><th>hi</th><th>there</th></tr></thead>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
</table>
<br />
<br />

如果任何tbody元素包含display: none一行，那么事情就会出错：

<table class="mainContent">
    <thead><tr><th>hi</th><th>there</th></tr></thead>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
    <tbody><tr class="hide"><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
</table>

以及样式：

table {
    border-collapse: collapse;
}
table tr td {
    border: solid 1px #ccc;
    padding: 4px;
}
.hide {
    display: none;
}

是否可以使用CSS隐藏表行,我有一个需要这个概念的项目.这是我的代码:

style.css中:

#hide-row { display:none; }

file.php

<table>
  <tr>
      <th>Name</th>
      <th>Address</th>
  </tr>
  <div id="hide-row">
     <?php foreach( $cops as $row ) { ?>
        <tr>
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->address; ?></td>
        </tr>
     <?php } ?>
  </div>
</table>

但是,它没有用,记录仍然出现.有人帮忙解决这个案子吗？任何帮助将不胜感激.先谢谢你!

与重复通知相反,这个问题不重复.声称的副本没有涉及嵌套的情况,我已经在我的问题中清楚地解释了这一点.

我有一个表,其中行可以有两个类之一:parent或child.有些父母有很多孩子,有些则没有孩子.表的HTML结构是平的,不能表示行之间的层次关系; 父母和孩子都是tr.例:

Parent A
Child  1
Child  2
Parent B
Parent C
Child  1

我想对行进行条带化以使奇数和偶数父行具有颜色,并且它们各自的子项将具有较浅的父颜色阴影.

请参阅附带的代码片段,了解我正在努力实现的目标.

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #eee;
  padding: 10px;
}

.parentOdd {
  background-color: #eb94fa;
}

.parentEven {
  background-color: #c294fa;
}

.oddChild {
  background-color: #f2c4fa;
}

.evenChild {
  background-color: #d8bbfd;
}

<table>
  <tbody>
    <tr class="parentOdd">
      <td>Parent A</td>
    </tr>
    <tr class="oddChild">
      <td>A1</td>
    </tr>
    <tr class="oddChild">
      <td>A2</td>
    </tr>
    <tr class="parentEven">
      <td>Parent B</td>
    </tr> …

我是VueJS的新手,所以这可能是一个非常简单的问题,但是这里有.

我正在调用我的API来获取一组记录.我想在一个简单的表中显示这些记录,但是我希望能够单击该行的最后一个单元格中的链接并将其发送到新的URL - 该对象的详细信息的URL.

这是我到目前为止所拥有的:

Vue Stuff:

var vm = new Vue({
  el: '#league-table',
  data: {
    leagues: [],
    apilink: '/api/leagues/',
  },

  mounted: function() {
    this.getLeagues();
  },
  methods: {
    getLeagues: function() {
      var self = this
      $.get('/api/leagues/', function(data){
        $.each(data, function(index, obj) {
          self.leagues.push(obj)
        });
      });
    },
    sayConsole: function() {
      console.log("OUTPUT here....")
    }
  }
});

HTML资料:

   <div class='card__content'>
      <div id='league-table' class='table-responsive'>
        <table class='table table--lg team-roster-table table-hover'>
          <thead>
            <th class='team-roster-table__name'>ID</th>
            <th class='team-roster-table__name'>Name</th>
            <th class='team-roster-table__name'>Characters</th>
            <th></th>
          </thead>

          <tbody>
            <tr v-for='league in leagues'>
              <td class='team-roster-table__number'>{{ …

我需要构建一个简单的数据表.所以通常我会说让我们使用表格,这就是它们的用途.

然而,这里有一个额外的小技巧,如果你点击"显示",有一个ajax调用,以显示下面的额外数据.这让我想知道,我应该切换到DIV吗？

我知道两者都有可能 - 但我正在努力寻找更清洁,更容易的东西......

(这里的数据是假的)