Question

基本上我想要完成的是这种表

我希望桌子的头部占据100％而桌子的其余部分占据让我们说95％

我会感谢任何方法，

非常感谢。

Answer 1

你可以通过在实际桌子的左右两侧添加一个空列来使头部的幻觉为100％，其余为95％。

否则，标记您的表格元素，然后使用$.ajax({ url: "testserver.php", dataType: 'jsonp', // jsonp async: false //IGNORED!! });和CSS在width: 100%;中调整各自的宽度，只需稍加努力即可。 注意：头部需要与表格的其余部分分开。

Answer 2

一种方法是使用嵌套表，第一个表包含标题，第二个表包含数据行。这是一个小提琴：https://fiddle.jshell.net/why9n859/
它可能需要一些修改才能完美地对齐它，但它应该可以用于此目的。

HTML：

Window {
    id: win
    width: 200
    height: 200

    MouseArea {
        anchors.fill: parent

        property int lastX
        property int lastY

        onPositionChanged: {
            // Remap the mouse coords back to the window.  Not
            // necessary in this example, but will be in 'real'
            // use.
            var mPos = mapToItem( null, mouse.x, mouse.y );
            mPos.x += win.x;
            mPos.y += win.y;

            // Skip the first iteration by testing if the properties
            // are defined, otherwise the window will jump.
            if ( lastX && lastY ) {
                win.x += mPos.x - lastX;
                win.y += mPos.y - lastY;
            }

            lastX = mPos.x;
            lastY = mPos.y;
        }
    }
}

CSS：

<table id="t1">
    <thead>
        <tr>
            <th id="left">#</th>
            <th>First Name</th>
            <th>Last Name</th>
            ...
        </tr>
    </thead>

    <tbody>
    <div>
    <table id="t2" style="width: 60%; margin-left: 2.75%;">

    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>Stu</td>
            ...
        </tr>
    </tbody>
        </table>
        </div>
    </tbody>
</table>

另一种方法是为具有空标题行的数据创建单个表。在表格上方，创建一个以保存实际列标题。您可以使用Bootstrap创建包含列的行。 Bootstrap使用12列网格，因此请确保使所有列标题的大小合计为12.然后将自定义标题行的背景颜色设置为您想要的任何值，并使表格宽度小于视图的100％。这是关于CSS＆＃34;宽度＆＃34;的一个体面的教程。财产：http://www.impressivewebs.com/width-100-percent-css/

Bootstrap 2.3.2语法：

thead { background-color: #09d; color: white; }
tbody {
    border: 1px solid #ccc;
}
th { padding-right: 10px; padding-left: 10px; }
td { padding-right: 10px; padding-left: 10px; }
#left { padding-left: 40px; }
#right { padding-right: 40px; }

Stu Nicholls有一个很好的嵌套表演示以及你可以用它们做什么 - 例如标题行可以在主体滚动时锁定。
http://www.cssplay.co.uk/menu/tablescroll.html

Answer 3

最简单的解决方案是添加一个空的额外左右列并指定所需的偏移宽度。

http://jsfiddle.net/133L67Lx/

<强> HTML

<table>
    <thead>
        <tr>
            <td></td>
            <th>#</th>
            <th>Date</th>
            <th>Name</th>
            <th>Email</th>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>02/08/15</td>
            <td>Vivian Voppnrueden</td>
            <td>savion_beahan@goldnerolson.org</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>2</td>
            <td>02/08/15</td>
            <td>Hattie Bashirian</td>
            <td>nash_weigand@torphy.name</td>
            <td></td>
        </tr>
    </tbody>
</table>

<强> CSS

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

thead tr{
    background-color: darkturquoise;
    color: #FFF;
}

tbody td{
    border-bottom: 1px solid #EEE;
    padding: 5px;
}

td,
th{
    text-align: left;
}

th:nth-child(2),
td:nth-child(2){
  text-align: center;  
   padding-left: 0;
}

th:last-child,
td:last-child{
    padding-left: 0;
}

td:first-child,
th:first-child,
td:last-child,
th:last-child{
    width: 5%;
    border-bottom: none;
}

如何使桌子的主体占据宽度小于桌子的头部

3 个答案: