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?

Solution 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];
    }
}

Solution 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

Solution 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];
    }
}

Solution 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()

Solution 5

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

View more solutions

Comments

[ArtSabintsev]

It's done by design. Take a look at the iOS 7 Notes app to see it in their apps. I agree that it's annoying :)

[Peter DeVries]

[Check out this solution for iOS 8][1] [1]: stackoverflow.com/a/25788003/4014757

[Peter DeVries]

[This solution will work on iOS 8][1] [1]: stackoverflow.com/a/25788003/4014757

[David H]

If you care about this, enter an enhancement "bug" on bug reporter. I just did.

[David H]

Apple just got back to me - this is not a bug, its a big misunderstanding on how to set the color. The color of the pixels to the left of the separator are actually part of the cell background color (NOT the cell.contentsView). See my new answer.

[Ashok]

@kozla13 thanks for pointing out. Now I have updated above answer to work with recently released iOS 8 sdk / Xcode 6.

[Brad]

Interesting that this worked for me while the other suggestions did not.

[David H]

@Ashok there is no white space - see my answer.

[allaire]

Experienced the same! what is the radar #?

[allaire]

Temp fix is to put the cell color the same as the contentView, that fix it for iphone, but still see a 1 px separator at the end on ipad.

[David H]

@allaire, why do you want to see the bug number. In the end it was closed as "not a bug", since those pixels are those of a view (the cell.backgroundColor) that you have control over. Make them clear, make then the same color as the contents view - its all your choice!

[allaire]

for some reason, I also styled the background of the cell to match the background of the contentView, and this white line still shows up on iPad (but not on iPhone).

[David H]

@allaire you keep saying it doesn't work - did you try my uploaded project referenced in my answer? Its a iPad project. I just ran it on my own iPad and guess what - the line is red just like the snap shot above. Download and try it yourself. play around with the view colors.

[REALFREE]

You cannot assign right or left property in seperatorInset directly but as whole

[ericgu]

@REALFREE Yes you can

[REALFREE]

see if you can compile with self.tableView.separatorInset.right = 0;

[Suragch]

This works in Xcode 7, iOS 9. Upvoted. This is a much cleaner solution than doing it by code.

[Jake Lin]

This solution doesn't work for static table view cell

[John LaBarge]

This does not work. Specifically it leaves 3 or 4 pts/pxs of space on the left hand margin.

[Chamath Jeevan]

This can be directly apply to the entire table as this self.tableView.separatorInset = UIEdgeInsetsZero;

[Randika Vishman]

All other answers in this thread didn't work but this one does the trick! I think what most of the other code required answers lack is that this answer setLayoutMargins even on the Cells too! :-) Cheers!

[Andreas777]

Just a note that the whole tableView solution this will move also the section headers accordingly.

[Mahendra Liya]

In Swift 5, UIEdgeInsetsZero has been renamed to UIEdgeInsets.zero