xxxxxxxxxx1
2
<button class="btn decrease shadow-0">3
<- Decrease Name width4
</button>5
6
<button class="btn increase shadow-0">7
Increase Name width ->8
</button>9
<div class="datatable">10
<table>11
<thead>12
<tr>13
<th class="th-sm">Name</th>14
<th class="th-sm">Position</th>15
<th class="th-sm">Office</th>16
<th class="th-sm">Age</th>17
<th class="th-sm">Start date</th>18
<th class="th-sm">Salary</th>19
</tr>20
</thead>21
<tbody>22
<tr>23
<td>Tiger Nixon</td>24
<td>System Architect</td>25
<td>Edinburgh</td>26
<td>61</td>27
<td>2011/04/25</td>28
<td>$320,800</td>29
</tr>30
<tr>31
<td>Garrett Winters</td>32
<td>Accountant</td>33
<td>Tokyo</td>34
<td>63</td>35
<td>2011/07/25</td>36
<td>$170,750</td>37
</tr>38
<tr>39
<td>Ashton Cox</td>40
<td>Junior Technical Author</td>41
<td>San Francisco</td>42
<td>66</td>43
<td>2009/01/12</td>44
<td>$86,000</td>45
</tr>46
<tr>47
<td>Cedric Kelly</td>48
<td>Senior Javascript Developer</td>49
<td>Edinburgh</td>50
<td>22</td>51
<td>2012/03/29</td>52
<td>$433,060</td>53
</tr>54
<tr>55
<td>Airi Satou</td>56
<td>Accountant</td>57
<td>Tokyo</td>58
<td>33</td>59
<td>2008/11/28</td>60
<td>$162,700</td>61
</tr>62
<tr>63
<td>Brielle Williamson</td>64
<td>Integration Specialist</td>65
<td>New York</td>66
<td>61</td>67
<td>2012/12/02</td>68
<td>$372,000</td>69
</tr>70
<tr>71
<td>Herrod Chandler</td>72
<td>Sales Assistant</td>73
<td>San Francisco</td>74
<td>59</td>75
<td>2012/08/06</td>76
<td>$137,500</td>77
</tr>78
<tr>79
<td>Rhona Davidson</td>80
<td>Integration Specialist</td>81
<td>Tokyo</td>82
<td>55</td>83
<td>2010/10/14</td>84
<td>$327,900</td>85
</tr>86
<tr>87
<td>Colleen Hurst</td>88
<td>Javascript Developer</td>89
<td>San Francisco</td>90
<td>39</td>91
<td>2009/09/15</td>92
<td>$205,500</td>93
</tr>94
<tr>95
<td>Sonya Frost</td>96
<td>Software Engineer</td>97
<td>Edinburgh</td>98
<td>23</td>99
<td>2008/12/13</td>100
<td>$103,600</td>101
</tr>102
<tr>103
<td>Jena Gaines</td>104
<td>Office Manager</td>105
<td>London</td>106
<td>30</td>107
<td>2008/12/19</td>108
<td>$90,560</td>109
</tr>110
<tr>111
<td>Quinn Flynn</td>112
<td>Support Lead</td>113
<td>Edinburgh</td>114
<td>22</td>115
<td>2013/03/03</td>116
<td>$342,000</td>117
</tr>118
<tr>119
<td>Charde Marshall</td>120
<td>Regional Director</td>121
<td>San Francisco</td>122
<td>36</td>123
<td>2008/10/16</td>124
<td>$470,600</td>125
</tr>126
<tr>127
<td>Haley Kennedy</td>128
<td>Senior Marketing Designer</td>129
<td>London</td>130
<td>43</td>131
<td>2012/12/18</td>132
<td>$313,500</td>133
</tr>134
</tbody>135
</table>136
</div>xxxxxxxxxx1
2
.datatable table {3
table-layout: fixed;4
}5
6
.datatable table td, .datatable table th {7
overflow: hidden;8
white-space: nowrap;9
-moz-text-overflow: ellipsis; 10
-ms-text-overflow: ellipsis;11
-o-text-overflow: ellipsis;12
text-overflow: ellipsis;13
max-width: none;14
}xxxxxxxxxx1
const decreaseButton = document.querySelector('.decrease')2
const increaseButton = document.querySelector('.increase')3
const firstColumnHeaderWidth = window.getComputedStyle(document.querySelector('th')).width4
let currentWidth = firstColumnHeaderWidth.slice(0, -2) - 1;5
6
increaseButton.addEventListener('click', () => {7
currentWidth = currentWidth + 6;8
document.querySelector('th').style.width = `${currentWidth}px` 9
})10
11
decreaseButton.addEventListener('click', () => {12
currentWidth = currentWidth - 6;13
document.querySelector('th').style.width = `${currentWidth}px` 14
}) Console errors: 0