Сразу оговорюсь, что добавление колонки написал первым вараинтом, который пришёл в голову, но в примерах это не основная идея, поэтому при желании можно использовать любой другой вариант.
Вот первый вариант, но он скорее всего автору не подойдёт, всё-таки колонка немного двигается, но с точки зрения правильности в вебе, он будет более адаптивным:
$(document).ready(function() {
var i = 0;
$('button').click(function() {
$('tr').prepend('<td>cell ' + i + '</td>');
i = i - 1;
});
});
table {
margin: 0 auto;
}
td {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<button>Click me</button>
Второй же вариант, это именно то, чего желает автор, отступ для примера взял рэндомный, а окончание листа определяется, по средней ячейке в таблице и если она больше оставшегося места, то ячейка не добавляется и появляется сообщение:
$(document).ready(function() {
var i = 0;
$('button').click(function() {
var tabMargin = parseFloat($('table').css('margin-left'));
var tableCellLength = $('tr').find('td').length;
var tableWidth = parseFloat($('table').css('width'));
if (tabMargin - tableWidth / tableCellLength - 15 > 0) {
$('tr').prepend('<td>cell ' + i + '</td>');
var addCellWidth = parseFloat($('tr').find('td').eq(0).css('width'));
$('table').css('margin-left', tabMargin - addCellWidth - 6 + 'px');
i = i - 1;
} else {
alert('Вы пытаетесь нарисовать ячейку на столе');
}
});
});
table {
margin-left: 175px;
}
td {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<button>Click me</button>
UPD. Вариант 3. Таблица больше не прыгает, но ограничение по ширине делать не стал, можно при желании взять из второго варианта:
$(document).ready(function() {
var j = 0;
var tableRowLength = $('#mainTable').find('tr').length;
for (var i = 0; i < tableRowLength; i++) {
$('#tablePaste').append('<tr></tr>');
}
$('button').click(function() {
$('#tablePaste').find('tr').prepend('<td>cell ' + j + '</td>');
j = j - 1;
});
});
table {
margin-left: 200px;
}
td {
border: 1px solid #ccc;
}
.paste-box {
position: relative;
width: 201px;
text-align: right;
}
#tablePaste {
position: absolute;
top: 0;
right: 0;
}
#tablePaste td {
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="paste-box">
<table id="tablePaste">
</table>
</div>
<table id="mainTable">
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<button>Click me</button>
PS. Извиняюсь за мой jQuery, при желании можно переписать на нативный JS, но мне лень. :)