White space before separator line into my TableView

Question

I have a question about UITableView... I have a UITableViewController and I created a custom cell. When I visualize the tableView I see a little white space before the separator line as you can see into this screenshot:

Why? It is a default visualize? Can I change something to remove this white left padding?

Answer 1

The leading whitespace is provided by default in iOS 7, even for custom cells.

Checkout this property separatorInset of UITableviewCell to remove/add white spacing at either ends of cell's line separator.

// Remove white space

cell.separatorInset = UIEdgeInsetsZero;

Alternatively, at UITableView level, you can use this property -

if ([tableView respondsToSelector:@selector(setSeparatorInset:)]) {  // Safety check for below iOS 7 
    [tableView setSeparatorInset:UIEdgeInsetsZero];
}

Update - Below code works on iOS 7 and iOS 8:

-(void)viewDidLayoutSubviews
{
    if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
        [self.tableView setSeparatorInset:UIEdgeInsetsZero];
    }

    if ([self.tableView respondsToSelector:@selector(setLayoutMargins:)]) {
        [self.tableView setLayoutMargins:UIEdgeInsetsZero];
    }
}

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
        [cell setSeparatorInset:UIEdgeInsetsZero];
    }

    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
}

Answer 2

Alternatively, you can also edit this in interface builder (IB):

1. Go to IB.
2. Select Table View.
3. Open "Attribute Inspector" on the right.
4. Change "Separator Insets" from Default to Custom.
5. Change the "Left" attribute from 15 to 0.

This has the same effect as @Ashok's answer, but doesn't require writing any code.

Update Works on iOS 7 and 8

Update Works on iOS 9

Answer 3

Use below code to remove the unwanted padding in UITableView. It works on both IOS 8 & 7

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell     forRowAtIndexPath:(NSIndexPath *)indexPath
{

    if ([tableView respondsToSelector:@selector(setSeparatorInset:)])
    {
        [tableView setSeparatorInset:UIEdgeInsetsZero];
    } 

    if ([tableView respondsToSelector:@selector(setLayoutMargins:)])
    {
        [tableView setLayoutMargins:UIEdgeInsetsZero];
    }

    if ([cell respondsToSelector:@selector(setLayoutMargins:)])
    {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
}

Answer 4

There is no white space! I entered a bug on this, Apple just closed it as "not a bug", but told me why its not a bug. I wrote a simple project that sets a color for every possible view in the app. What I see is that the color of those pixels is actually the background color of the cell itself (not the contentsView!), just as Apple had told me.

The cell.contentView.backgroundColor is green, and the cell.background color is red (taken with Pixie):

In the end, without a separator, the cell.contentView fills the cell completely. With a separator, there is a pixel or two gap at the bottom. The separator, when inset, fills the most of the gap, but there are then some pixels of the cell showing through.

Mystery solved!

EDIT: It seems that depending on how you configure your Storyboard, that the contentView.backgroundColor gets "lost" or set to White. If you over ride it when supplying cells you can get the behavior your want:

    let cell = tableView.dequeueReusableCellWithIdentifier("FOO", forIndexPath: indexPath) as UITableViewCell

    cell.backgroundColor = UIColor.redColor()
    cell.contentView.backgroundColor = UIColor.greenColor()

Answer 5

Swift

cell.separatorInset = UIEdgeInsetsMake(0, 0, cell.frame.size.width, 0)
if (cell.respondsToSelector("preservesSuperviewLayoutMargins")){
        cell.layoutMargins = UIEdgeInsetsZero
        cell.preservesSuperviewLayoutMargins = false
   }

This one worked for me

Thanks

Answer 6

This did the trick for me:

cell?.layoutMargins = UIEdgeInsetsZero;
cell?.preservesSuperviewLayoutMargins = false

Answer 7

For those of you who want to make the retain the UIEdgeInsetSettings in Swift and are not using Storyboards:

Before: (Default Behavior)

Add the following code:

tableView.separatorInset.right = tableView.separatorInset.left

Answer 8

Here is an extension to UITableViewCell Class for swift 3 & later

extension UITableViewCell
{
    func removeSeparatorLeftPadding() -> Void
    {
        if self.responds(to: #selector(setter: separatorInset)) // Safety check
        {
            self.separatorInset = UIEdgeInsets.zero
        }
        if self.responds(to: #selector(setter: layoutMargins)) // Safety check
        {
            self.layoutMargins = UIEdgeInsets.zero
        }
    }
}

Usage:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
    let cell : UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "menuCellID")!
    // .. Your other code
    cell.removeSeparatorLeftPadding()
    return cell
}

Hope this helps some one!

Naresh.