如何更改网格列的宽度?

问题描述 投票:0回答:1

我在一个调查平台中工作,该平台可以进行一些CSS修改。我不能太大地改变HTML。有什么办法可以减少这些列之间的空间?看到这张图片:https://imgur.com/a/o1l9wtv

我是CSS新手,无法确定哪个代码可以工作。预先谢谢!

<div class='questions'>
<hr class="element-seperator element-seperator-first element-seperator-first-question" /><div class="question-element" >
<table class="question question-battery" cellspacing=0 >
<tr class='title-row'>
<td class='question-title' colspan="6"><span style="font-size:10px">Main question</span></td>
</tr>
<tr class='choice-header-row'>
<td class="empty-box" colspan="1" rowspan="1">&nbsp;</td>
<td  class="battery battery-grid battery-odd battery-first battery-last choice-header choice-odd choice-first col-odd col-first col-number-1" colspan="1" rowspan="1">1</td>
<td  class="battery battery-grid battery-odd battery-first battery-last choice-header choice-even choice-middle col-even col-number-2" colspan="1" rowspan="1">2</td>
<td  class="battery battery-grid battery-odd battery-first battery-last choice-header choice-odd choice-middle col-odd col-number-3" colspan="1" rowspan="1">3</td>
<td  class="battery battery-grid battery-odd battery-first battery-last choice-header choice-even choice-middle col-even col-number-4" colspan="1" rowspan="1">4</td>
<td  class="battery battery-grid battery-odd battery-first battery-last choice-header choice-odd choice-last col-odd col-last col-number-5" colspan="1" rowspan="1">5</td>
</tr>
<tr class="question-line question-line-odd question-line-first">
<td  class='row-header' colspan=1 rowspan=1 ><span class="row-header-text">Question 1</span></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-odd choice-first col-odd col-first col-number-1' rowspan=1 colspan=1><input id='ch_1900373921-1900373923' class='radio-button' type="radio" name="c1900373921" value="1900373923"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900373921-1900373923">1</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-even choice-middle col-even col-number-2' rowspan=1 colspan=1><input id='ch_1900373921-1900374960' class='radio-button' type="radio" name="c1900373921" value="1900374960"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900373921-1900374960">2</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-odd choice-middle col-odd col-number-3' rowspan=1 colspan=1><input id='ch_1900373921-1900374961' class='radio-button' type="radio" name="c1900373921" value="1900374961"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900373921-1900374961">3</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-even choice-middle col-even col-number-4' rowspan=1 colspan=1><input id='ch_1900373921-1900374962' class='radio-button' type="radio" name="c1900373921" value="1900374962"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900373921-1900374962">4</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-odd choice-last col-odd col-last col-number-5' rowspan=1 colspan=1><input id='ch_1900373921-1900374963' class='radio-button' type="radio" name="c1900373921" value="1900374963"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900373921-1900374963">5</label></td>
</tr>
<tr class="question-line question-line-even question-line-last">
<td  class='row-header' colspan=1 rowspan=1 ><span class="row-header-text">Question 2</span></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-odd choice-first col-odd col-first col-number-1' rowspan=1 colspan=1><input id='ch_1900374959-1900373923' class='radio-button' type="radio" name="c1900374959" value="1900373923"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900374959-1900373923">1</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-even choice-middle col-even col-number-2' rowspan=1 colspan=1><input id='ch_1900374959-1900374960' class='radio-button' type="radio" name="c1900374959" value="1900374960"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900374959-1900374960">2</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-odd choice-middle col-odd col-number-3' rowspan=1 colspan=1><input id='ch_1900374959-1900374961' class='radio-button' type="radio" name="c1900374959" value="1900374961"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900374959-1900374961">3</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-even choice-middle col-even col-number-4' rowspan=1 colspan=1><input id='ch_1900374959-1900374962' class='radio-button' type="radio" name="c1900374959" value="1900374962"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900374959-1900374962">4</label></td>
<td class='battery battery-grid battery-odd battery-first battery-last choice cell choice-odd choice-last col-odd col-last col-number-5' rowspan=1 colspan=1><input id='ch_1900374959-1900374963' class='radio-button' type="radio" name="c1900374959" value="1900374963"  data-choice-missing="false" data-choice-irrelevant="false"/><label class="generatedlabel" for="ch_1900374959-1900374963">5</label></td>
</tr>
</table>
</div>
html css width
1个回答
1
投票

您可以使用padding或

.grid-container {
  grid-column-gap: 50px;
}
© www.soinside.com 2019 - 2024. All rights reserved.