Wordpress Metabox输入表格溢出

时间:2013-10-23 15:51:43

标签: html css wordpress

我有一个带有一些表格和输入表格的Wordpress插件。这些表是使用标准的Wordpress表widefat类构建的。输入表单嵌入到widefat表中的单元格中。

我只是在显示数据时,表格会调整大小以适应元数据。在我使用输入字段的地方,表格溢出了元数据框,见图:

Input forms overrunning WordpressMetabox

我希望输入表像数据表一样调整大小。

这是普通表呈现的方式:

<table class="widefat" id="item_publication_attributes">
    <tr>
        <th class="type"><b>Type</b></th>
        <th class="date"><b>Date</b></th>
        <th class="name"><b>Name</b></th>
        <th class="address"><b>Address</b></th>
        <th class="gender"><b>Map</b></th>
        <th></th>
    </tr>
    <tr class="publish-attribute publish-attribute-1">
        <td class="type">Publisher</td>
        <td class="date">15/2/1971</td>
        <td class="name">Publish Company</td>
        <td class="location">63 The Street, The Town, Cambridgeshire</td>
        <td class="map-icon" style="font-size:70%">[map]</td>
        <td><a href="#" class="publish-attribute-delete" data-id="1">Delete</a> | <a href="#" class="person-edit" data-id="1">Edit</a></td>
    </tr>
</table>

这就是Form表的呈现方式:

<form>
<input type="hidden" name="post_id" id="add_publishing_attribute_post_id" value=2624/>
<table class="widefat" id="add_new_publishing_attribute">
    <tr id="add_new_publishing_attribute_row">
        <td class="type">
            <select name="type" id="add_attribute_type">
                <option value="0">ID 0</option>
                <option value="1">ID 1</option>
                <option value="2">ID 2</option>
            </select>
        </td>
        <td class="dd"><input type="text" name="dd" id="add_attribute_dd" placeholder="dd" /></td>
        <td class="mm"><input type="text" name="mm" id="add_attribute_mm" placeholder="mm" /></td>
        <td class="yyyy"><input type="text" name="yyyy" id="add_attribute_yyyy" placeholder="yyyy" /></td>
        <td class="name"><input type="text" name="name" id="add_attribute_name" placeholder="name" /></td>
        <td class="location"><input type="text" name="location" id="add_attribute_location" placeholder="location" /></td>          
        <td><input type="submit" name="submit" id="add_new_attribute_submit" value="Add"/></td>
    </tr>
</table>
</form>

感谢任何建议

1 个答案:

答案 0 :(得分:2)

我没有得到的是您在元框中使用表单的原因...我们只是将输入字段放在那里,save_post负责休息,here's a full example

要修复表格布局,我在这里找到了答案:Why is my HTML table not respecting my CSS column width?

使用:table-layout:fixed

<table class="widefat" id="add_new_publishing_attribute" style="table-layout:fixed">