html - 试图将两张 table 居中并缩小差距

Question

我需要将这两列 radio 居中，并使它们在中间靠得更近。

你能帮忙吗？

<table class="layout_table">
<tr>
    <td style="width: 25%; text-align: left; padding-right: 25px;">
        <fieldset class="icons" style="width: 120px; text-align: center;">
            <legend>QS Actions</legend>
            <a href="show.whatif_view_scenario?id=${scenario.scenarioId}"><img src="../images/icon_back.gif" border="0" alt="Back to Scenario View"/></a>
        </fieldset>
    </td>
    <td style="width: 50%;">
        <h2>
            Quarter Spreads
        </h2>
    </td>
    <td style="width: 25%;; text-align: left; padding-left: 30px;">
        <br/>
        <table class="legend_table" style="width: 300px;">
            <tr>
                <td colspan="2" class="shaded">Legend</td>
            </tr>
            <tr>
                <td style="background-color: #ffff99;">Yellow: Modified during the current session</td>
            </tr>
            <tr>
                <td class="critical_text" style="background: #ccccff;">Red MMC QS: Varies from sum of SMC/ELMP F/UF</td>
            </tr>
            <tr>
                <td class="critical_text" style="background: #ffffff;">Red Current Scenario QS: Varies from MMC</td>
            </tr>
        </table>
    </td>
</tr>
</table>




<table class="layout_table">
<tr>
<table style="float: left;">
    <strong>Column A:</strong><br>
    <input type="radio" name="radioA" value="MWS"  />MWS<br>
    <input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP&nbsp;Unfunded<br>
    <input type="radio" name="radioA" value="SMC Funded"  />SMC/ELMP&nbsp;Funded<br>
    <input type="radio" name="radioA" value="MMC" />MMC<br>
    <input type="radio" name="radioA" value="Current Scenario" />Current Scenario
    </table>

    <table>
    <strong>Column B:</strong><br>
    <input type="radio" name="radioA" value="MWS"  />MWS<br>
    <input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP&nbsp;Unfunded<br>
    <input type="radio" name="radioA" value="SMC Funded"  />SMC/ELMP&nbsp;Funded<br>
    <input type="radio" name="radioA" value="MMC" />MMC<br>
    <input type="radio" name="radioA" value="Current Scenario" />Current Scenario
    </table>
</tr>
</table>

Answer 1

<table class="layout_table">
<tr>
    <td>

    <strong>Column A:</strong><br>
    <input type="radio" name="radioA" value="MWS"  />MWS<br>
    <input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP&nbsp;Unfunded<br>
    <input type="radio" name="radioA" value="SMC Funded"  />SMC/ELMP&nbsp;Funded<br>
    <input type="radio" name="radioA" value="MMC" />MMC<br>
    <input type="radio" name="radioA" value="Current Scenario" />Current Scenario
    </td>
<td>

    <strong>Column B:</strong><br>
    <input type="radio" name="radioA" value="MWS"  />MWS<br>
    <input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP&nbsp;Unfunded<br>
    <input type="radio" name="radioA" value="SMC Funded"  />SMC/ELMP&nbsp;Funded<br>
    <input type="radio" name="radioA" value="MMC" />MMC<br>
    <input type="radio" name="radioA" value="Current Scenario" />Current Scenario
    </td>
</tr>
</table>

http://jsfiddle.net/LCmrp/