标签: html-table

我有一个<th>包含<div>文本的表格标题。我想垂直对齐 div，使其与标题的底部对齐。尽管看起来应该很容易，但我在这样做时遇到了严重的麻烦。任何帮助都会很棒。

IE

<table>
  <tr>
    <th>
      <div>T<br>E<br>X<br>T</div>
    </th>
    ...
  </tr>
  ...
</table>

如您所见，我使标题文本垂直（通过添加中断标记）。标题是动态拉动的，长度（因此高度）会有所不同。但我需要它们对齐底部而不是中心。

我正在尝试使用一个 div 来保存我的广告并浮动到页面右侧。我希望主体中的表格和文本位于广告的左侧，然后在广告结束时一直延伸到页面的右侧。

问题是主体中有一个表格，它不会显示在div的左侧。它显示在其下方。我该如何解决？

<p> 
    <div style="margin:5px; float:right;">
        <img src="ad.jpg" height="600" width="160">
    </div>         
    blah blah blah
    <table width="100%">
        <tr><td>dsf</td></tr>
    </table> 
    the table because of the 100% appears below the div 
    for the ad.jpg instead of to the left of it
</p>

我需要建立一个 2x2 的表格，其中每个单元格只包含一个图像（20x20 大小），没有任何额外的空间。

我试图强制图像和表格单元格的大小，但结果表格仍然有额外的空间。我错过了什么？

http://jsfiddle.net/casaschi/M74nN/

HTML

<table id="myTable" cellspacing="0" cellpadding="0" border="0">
    <tr>
       <td>
            <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
       </td>
        <td>
            <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
        </td>
        <td>
           <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
        </td>
    </tr>
</table>
<div id="out"></div>

CSS

table {
    width: 40px;
    height: 40px;
    border: none;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0;
    padding: 0;
}
td, img {
    border: none;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
}

JS

document.getElementById("out").innerHTML = document.getElementById("myTable").offsetWidth + "x" + document.getElementById("myTable").offsetHeight;

<table>
    <thead>
        <th colspan="4">Liquor Store Blues</th>
    </thead>
    <tbody>
        <tr>
            <td colspan="4">Meow</td>
        </tr>
        <tr>
            <td colspan="2">Meow</td>
            <td colspan="2">Meow</td>
        </tr>
        <tr>
            <td colspan="1.33">Meow</td>
            <td colspan="1.33">Meow</td>
            <td colspan="1.33">Meow</td>
        </tr>
        <tr>
            <td>Meow</td>
            <td>Meow</td>
            <td>Meow</td>
            <td>Meow</td>
        </tr>
    </tbody>
</table>

我在这里得到了它的图像：http : //i.imgur.com/myKN33l.png

想设置每个td的colspan第4行中1.44，但后来我才知道，colspan不采取十进制数。那么我该怎么做呢？我应该使用 CSS 吗？如果是这样，如何？

我需要能够使用纯 HTML 将表格单元格的内容垂直和水平居中。

使用下面的代码，有人可以为我修改它。我可以看到很多 CSS 示例，但我不是 CSS 类型的人，我不想真正了解它。

这是一次性编辑。

<table border="1" bordercolor="7c74ba" style="background-color:#FFFFFF" width="100%" cellpadding="1" cellspacing="0">
    <tr>
        <td>Table Cell</td>
    </tr>
</table>

如何在Table Cell不移动表格本身的情况下垂直和水平居中文本。表格单元完美地放置在我想要的位置。

我面临的问题是，尽管明确设置了自己的宽度，但我的表中的 TD 仍在继承表的宽度。

代码如下：

    <div class="widget widget-new-products">
    <div class="widget-products">
        <table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
               <tr>
                    <td>
                            <img src="header.gif" alt="New Releases">
                    </td>
            </tr>

                       <tr style="font-size: 0;">

                                <td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>

                                <td width="85px">
                                   <a href="" title="" class="product-image"><img src="product1.jpg" width="85" height="85" alt="image" ></a>
                                </td>

                                <td width="100px">
                                    <a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
                                </td>

                                <td width="100px" align="right">
                                    <p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
                                    <a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a>
                                </td>

                               <td width="10px"> …

我们会获得一些指导表示感谢,[我们早早进入编码]和已经看过很多例子,但能不能让我们的JSON导入到表中.

在那一刻,我们有内联的表数据,但是正确格式化的JSON文件现在可用并自动更新,我们希望在加载页面时将其加载到表中.

这是当前使用的示例:

<div>
<p> *** OTHER STUFF HERE ***<p/>
    <table id="gable">
        <colgroup>
            <col class="twenty" />
            <col class="fourty" />
            <col class="thirtyfive" />
            <col class="twentyfive" />
        </colgroup>
        <tr>
            <th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspCOUNTRY</th>
            <th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspLOCATION</th>
            <th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspBALANCE</th>
            <th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspDATE</th>
        </tr>
    </table>
</div>
<script>
var data = [
    { "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
    { "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
    { "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
    { "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
    { "COUNTRY":" ", "LoC":"BALANCE:", …

我有一个有长标题的表.我正在尝试旋转文本,使其从单元格底部到顶部.我尝试过写作模式的组合:vertical-rl; 和变换:rotate(-180deg);.

我似乎想出的最好的是在transform属性中添加translateY(-100%).设法按照我喜欢的方式将文本排列到表格单元格的底部,但现在我无法弄清楚如何将整个文件向下移动以正确对齐.

这是我正在处理的页面.向下滚动以查看表格.

我整个下午一直在拔头发.任何想法将不胜感激.

http://www.1000islandsplayhouse.com/patron-members-club-new/

我给<td>b-table元素的标签赋予样式有问题。

这是模板：

    <b-table
      :fields="fields"
      :items="items"
      class="mx-1 mt-2"
      v-if="items && items.length > 0"
    >
      <template
        slot="email"
        slot-scope="row"
      >
        <div :title="row.item.email">
          <p class="user-email">{{row.item.email}}</p>
        </div>
      </template>
    </b-table>

这是字段：

    fields: [
      { key: "email", label: "Email"},
      { key: "user", label: "Name" },
      { key: "role", label: "Role" }
    ],

我想给<td>此表的最大宽度为300px 。请帮忙！

我不能让以下内容在React的工作中 render()

<table>
  <tbody>
    ...
    { this.state.data.map( (entry, index) => 
      <tr>{ Object.values(entry).forEach( e => <td>{e}</td> )}</tr> 
    )}
  </tbody>
</table>

但是，当我替换为时<td>{e}</td>，console.log(e)我会看到期望的渲染效果。实际上，任何常规的html元素也不会在forEach方法内部呈现。在React中执行此操作的常用方法是什么？