标签: html-table

我需要动态更改html/js表中列的顺序,你可以告诉我怎么做吗？

如何垂直居中表格单元格内的div？

HTML:

<tr class="rowClass">
    <td class="cellClass">
        <div class="divClass">Stuff</div>
    </td>
</tr>

CSS:

.rowClass {
    vertical-align:middle !important;
    height:90px;
}

.cellClass {
    vertical-align:middle !important;
    height:90px;
}

.divClass {
    vertical-align:middle !important;
    height:90px;
}

我知道类定义是多余的,但我一直在尝试很多不同的东西.为什么解决方案(不管是什么)不直观.我试过的"明显"解决方案都没有用.

我想在表的元素th内插入一个标记.我正在使用创建的行对象的方法,实际插入.有没有使用任何JS库的JavaScript解决方案？trtheadinsertCelltable.tHeadtd

更新 目前我正在使用与Minko Gechev和gaurav提供的解决方案相同的东西.我想知道是否有任何干净的解决方案,如使用insertCell？

Markdown具有管道表语法,但在某些情况下还不够.

| table | syntax | without multiline cell content |

因此,我们可以使用HTML表格标签.

<table>
<tr>
<td>
   ```csharp
   const int x = 3;
   const string y = "foo";
   readonly Object obj = getObject();
   ```
</td>
<td>
  ```nemerle
  def x : int = 3;
  def y : string = "foo";
  def obj : Object = getObject();
  ```
</td>
<td>
  Variables defined with <code>def</code> cannot be changed once defined. This is similar to <code>readonly</code> or <code>const</code> in C# or <code>final</code> in Java. Most variables …

The problem

I'm trying to parse an HTML table with rowspans in it, as in, I'm trying to parse my college schedule.

I'm running into the problem where if the last row contains a rowspan, the next row is missing a TD where the rowspan is now that TD that is missing.

I have no clue how to account for this and I hope to be able to parse this schedule.

What I tried

Pretty much everything I can think …

<table border="1" width="100%" ID="Table2">
<tr>
  <td>100</td>
</tr>
</table>

这段代码仍然留在桌子两侧的"英寸"空间.试图让表格跨越页面的整个宽度.谢谢.

我有一个像这样的HTML表格:

<table border="1">
    <tbody>
        <tr>
            <td><a href="#" class="delete">DELETE ROW</a>COL 1</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

当我点击"删除"类的链接时,我需要一个函数来删除指定的列.你能帮我吗 ？

我有这个标记:

<style>
    table
    {
        border:1px solid black;
        width:400px;
        height:300px;
        border-collapse:collapse;
    }
    table tbody
    {
        border:1px solid red;
    }
    table td
    {
        background:yellow;
        padding:10px;
        border-bottom:1px solid green;
        height:20px;
    }
</style>


<table>
<tbody>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>
</tbody>
</table>

我需要的是行不会伸展高度.有没有办法固定行高？

我们希望在电子邮件中显示订单详细信息

?<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>???????????????????????????????????????????

理想情况下,我们希望标题的背景颜色为"#5D7B9D",文本颜色为"#fff".
我们正在使用bgcolor='#5D7B9D'更改背景颜色,并且无法找到替换方法来更改文本颜色.
由于大多数电子邮件提供商剥离了CSS,我们根本无法使用style属性.

问题是

1. 如何使标题文本显示为白色？
2. 还有其他方法吗？

我有这个表有一些dependents信息,每个行都有一个添加和删除按钮来添加/删除其他dependents.当我单击"添加"按钮时,会在表中添加一个新行,但是当我单击"删除"按钮时,它会首先删除标题行,然后在后续单击时删除相应的行.

这是我有的:

Javascript代码

   function deleteRow(row){
      var d = row.parentNode.parentNode.rowIndex;
      document.getElementById('dsTable').deleteRow(d);
   }

HTML代码

<table id = 'dsTable' >
      <tr>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = …