I have a Wordpress plugin with some tables and input forms. The tables are built using the standard Wordpress table widefat class. The input forms are embedded into cells in the widefat table.
Where I am just displaying data, the table resizes to fit the metabox. Where I am using input fields, the table overflows the metabox, see picture:
I would like the input table to resize like the data table.
This is how the normal table renders:
<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>
And this is how the Form table renders:
<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>
Grateful for any suggestions